@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg: hsl(240, 18%, 4%);
    --surface: hsla(240, 16%, 8%, 0.7);
    --surface-hover: hsla(240, 16%, 12%, 0.85);
    --surface-deep: hsla(240, 16%, 6%, 0.8);
    --surface-muted: hsla(240, 16%, 6%, 0.5);
    --surface-empty: hsla(240, 16%, 10%, 0.4);

    --border: hsla(240, 10%, 20%, 0.5);
    --border-accent: hsla(270, 70%, 60%, 0.4);

    --text: hsl(0, 0%, 95%);
    --text-2: hsl(240, 8%, 70%);
    --text-3: hsl(240, 6%, 45%);

    --accent: hsl(270, 85%, 60%);
    --accent-2: hsl(180, 85%, 50%);
    --accent-3: hsl(145, 80%, 45%);
    --accent-4: hsl(25, 90%, 55%);
    --accent-bg: hsla(270, 85%, 60%, 0.15);
    --accent-2-bg: hsla(180, 85%, 50%, 0.15);
    --accent-3-bg: hsla(145, 80%, 45%, 0.15);

    --navbar-bg: hsla(240, 18%, 4%, 0.8);
    --footer-bg: hsla(240, 16%, 6%, 0.8);
    --input-bg: hsla(240, 16%, 6%, 0.8);
    --chart-bg: hsla(240, 16%, 6%, 0.4);
    --table-head-bg: hsla(240, 16%, 6%, 0.5);
    --table-hover-bg: hsla(240, 16%, 12%, 0.2);
    --terminal-bg: #000;
    --terminal-text: #0f0;
    --running-bg: hsla(145, 80%, 20%, 0.4);
    --stopped-bg: hsla(25, 90%, 20%, 0.4);

    --toast-ok-bg: hsla(145, 80%, 14%, 0.95);
    --toast-ok-text: hsl(145, 80%, 88%);
    --toast-ok-border: hsl(145, 80%, 40%);
    --toast-err-bg: hsla(25, 90%, 14%, 0.95);
    --toast-err-text: hsl(25, 90%, 88%);
    --toast-err-border: hsl(25, 90%, 50%);
    --toast-info-bg: hsla(220, 80%, 14%, 0.95);
    --toast-info-text: hsl(220, 80%, 88%);
    --toast-info-border: hsl(220, 80%, 55%);

    --glow-1: hsla(270, 85%, 60%, 0.08);
    --glow-2: hsla(180, 85%, 50%, 0.06);
    --shadow-glow: 0 0 20px hsla(270, 85%, 60%, 0.25);
    --shadow-glow-2: 0 0 20px hsla(180, 85%, 50%, 0.25);
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.12);
    --shadow-md: 0 10px 20px -4px rgba(0,0,0,0.32);
    --shadow-lg: 0 20px 40px -8px rgba(0,0,0,0.52);

    --hint-ok: hsl(145, 80%, 45%);
    --hint-err: hsl(0, 80%, 58%);
    --hint-neutral: hsl(240, 8%, 60%);

    --strength-1: hsl(0, 80%, 52%);
    --strength-2: hsl(25, 90%, 52%);
    --strength-3: hsl(50, 90%, 52%);
    --strength-4: hsl(90, 70%, 46%);
    --strength-5: hsl(145, 80%, 40%);

    --font: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    --nav-h: 64px;
    --radius: 8px;
}

[data-theme="light"] {
    --bg: #F5F5F7;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-hover: rgba(255, 255, 255, 0.96);
    --surface-deep: rgba(255, 255, 255, 0.92);
    --surface-muted: rgba(235, 235, 242, 0.65);
    --surface-empty: rgba(235, 235, 242, 0.5);

    --border: rgba(0, 0, 0, 0.1);
    --border-accent: hsla(270, 70%, 60%, 0.28);

    --text: #111111;
    --text-2: rgba(17, 17, 17, 0.6);
    --text-3: rgba(17, 17, 17, 0.38);

    --accent-bg: hsla(270, 85%, 58%, 0.1);
    --accent-2-bg: hsla(180, 85%, 42%, 0.1);
    --accent-3-bg: hsla(145, 80%, 38%, 0.1);

    --navbar-bg: rgba(245, 245, 247, 0.88);
    --footer-bg: rgba(232, 232, 240, 0.95);
    --input-bg: rgba(255, 255, 255, 0.95);
    --chart-bg: rgba(240, 240, 245, 0.5);
    --table-head-bg: rgba(238, 238, 245, 0.8);
    --table-hover-bg: rgba(0, 0, 0, 0.03);
    --terminal-bg: #1a1a2e;
    --terminal-text: #4eff91;
    --running-bg: hsla(145, 60%, 86%, 0.6);
    --stopped-bg: hsla(25, 70%, 86%, 0.6);

    --toast-ok-bg: hsla(145, 60%, 96%, 0.97);
    --toast-ok-text: hsl(145, 60%, 20%);
    --toast-ok-border: hsl(145, 60%, 42%);
    --toast-err-bg: hsla(0, 70%, 96%, 0.97);
    --toast-err-text: hsl(0, 70%, 22%);
    --toast-err-border: hsl(0, 70%, 48%);
    --toast-info-bg: hsla(220, 70%, 96%, 0.97);
    --toast-info-text: hsl(220, 70%, 22%);
    --toast-info-border: hsl(220, 70%, 52%);

    --glow-1: hsla(270, 85%, 60%, 0.05);
    --glow-2: hsla(180, 85%, 50%, 0.04);
    --shadow-glow: 0 0 20px hsla(270, 85%, 60%, 0.14);
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.06);
    --shadow-md: 0 10px 20px -4px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 40px -8px rgba(0,0,0,0.14);

    --hint-ok: hsl(145, 60%, 28%);
    --hint-err: hsl(0, 65%, 38%);
    --hint-neutral: hsl(240, 8%, 48%);
}