:root {
  color-scheme: dark;
  --font-sans: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --bg: #0b0f14;
  --bg-elevated: #0f141b;
  --bg-panel: #131922;
  --bg-panel-strong: #18212c;
  --bg-canvas: #080b10;
  --surface: rgba(19, 25, 34, 0.92);
  --surface-soft: rgba(22, 29, 39, 0.9);
  --surface-strong: rgba(26, 36, 48, 0.96);
  --surface-overlay: rgba(12, 16, 22, 0.9);
  --surface-glass: #111821;
  --surface-card: #121923;
  --surface-card-muted: #101720;
  --surface-highlight: rgba(20, 184, 166, 0.09);

  --border: rgba(148, 163, 184, 0.15);
  --border-strong: rgba(203, 213, 225, 0.24);
  --border-accent: rgba(20, 184, 166, 0.28);
  --line-subtle: rgba(148, 163, 184, 0.1);

  --text: #f9fafb;
  --text-soft: #d8e1ec;
  --text-muted: #9ca3af;
  --text-dim: #7b8798;
  --text-inverse: #08111f;

  --primary: #2dd4bf;
  --primary-strong: #38bdf8;
  --primary-soft: rgba(45, 212, 191, 0.12);
  --primary-soft-strong: rgba(56, 189, 248, 0.14);
  --primary-glow: rgba(45, 212, 191, 0.18);
  --accent: #a3e635;
  --accent-soft: rgba(163, 230, 53, 0.1);

  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.16);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.16);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.16);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.16);
  --neutral-soft: rgba(148, 163, 184, 0.12);

  --hero-panel: #101720;
  --hero-score-bg: #0e151e;
  --card-gradient: #121923;
  --highlight-panel: #121923;
  --highlight-panel-muted: #101720;
  --premium-panel: #111821;
  --premium-subpanel: rgba(10, 14, 26, 0.58);
  --hero-chip-border: rgba(255, 255, 255, 0.14);
  --hero-chip-bg: rgba(255, 255, 255, 0.06);
  --hero-chip-text: rgba(249, 250, 251, 0.86);
  --banner-danger: linear-gradient(90deg, rgba(127, 29, 29, 0.96), rgba(239, 68, 68, 0.88));
  --code-bg: rgba(8, 17, 31, 0.92);
  --grid-line: rgba(148, 163, 184, 0.045);
  --focus-ring: 0 0 0 1px rgba(45, 212, 191, 0.58), 0 0 0 4px rgba(45, 212, 191, 0.14);
  --header-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.26);
  --shadow-glow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 10px 24px rgba(45, 212, 191, 0.08);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  --page-width: 1280px;
  --page-gutter: clamp(0.85rem, 2vw, 1.5rem);
  --content-width: min(960px, 100%);
  --transition-fast: 180ms ease;
  --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-elevated: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-strong: #edf5ff;
  --bg-canvas: #eef2f7;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-soft: rgba(248, 251, 255, 0.92);
  --surface-strong: rgba(239, 246, 255, 0.98);
  --surface-overlay: rgba(255, 255, 255, 0.76);
  --surface-glass: #ffffff;
  --surface-card: #ffffff;
  --surface-card-muted: #f8fafc;
  --surface-highlight: rgba(20, 184, 166, 0.08);

  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --border-accent: rgba(59, 130, 246, 0.22);
  --line-subtle: rgba(15, 23, 42, 0.06);

  --text: #0f172a;
  --text-soft: #1e293b;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #f8fafc;

  --primary: #0f766e;
  --primary-strong: #0284c7;
  --primary-soft: rgba(15, 118, 110, 0.09);
  --primary-soft-strong: rgba(2, 132, 199, 0.1);
  --primary-glow: rgba(15, 118, 110, 0.14);
  --accent: #65a30d;
  --accent-soft: rgba(101, 163, 13, 0.1);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.12);
  --neutral-soft: rgba(148, 163, 184, 0.12);

  --hero-panel: #ffffff;
  --hero-score-bg: #f8fafc;
  --card-gradient: #ffffff;
  --highlight-panel: #ffffff;
  --highlight-panel-muted: #f8fafc;
  --premium-panel: #ffffff;
  --premium-subpanel: rgba(255, 255, 255, 0.78);
  --hero-chip-border: rgba(37, 99, 235, 0.18);
  --hero-chip-bg: rgba(37, 99, 235, 0.08);
  --hero-chip-text: #000000;
  --banner-danger: linear-gradient(90deg, rgba(185, 28, 28, 0.96), rgba(239, 68, 68, 0.88));
  --code-bg: rgba(236, 244, 255, 0.92);
  --grid-line: rgba(37, 99, 235, 0.05);
  --focus-ring: 0 0 0 1px rgba(37, 99, 235, 0.4), 0 0 0 4px rgba(37, 99, 235, 0.14);
  --header-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);

  --shadow-xs: 0 8px 18px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 20px 44px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  --shadow-md: 0 28px 64px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.84) inset;
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 18px 42px rgba(37, 99, 235, 0.12);
}