/* — Nova Console design tokens — */

:root {
  color-scheme: dark;

  /* — background — */
  --bg-canvas: #08080A;
  --bg-surface: #0E0E11;
  --bg-raised: #141419;
  --bg-overlay: #1A1A21;
  --bg-inset: #0B0B0E;
  --bg-hover: rgba(255, 255, 255, .04);
  --bg-active: rgba(255, 255, 255, .07);

  /* — border — */
  --border-subtle: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);

  /* — text — */
  --text-primary: #F2F2F5;
  --text-secondary: #A0A0AB;
  --text-muted: #6B6B78;
  --text-inverse: #0A0A0C;

  /* — accent — */
  --accent: #6E5AF6;
  --accent-hover: #8271F8;
  --accent-active: #5B45E8;
  --accent-soft: rgba(110, 90, 246, .14);
  --accent-border: rgba(110, 90, 246, .38);
  --accent-ink: #FFFFFF;

  /* — status — */
  --success: #0CA30C;
  --warning: #FAB219;
  --serious: #EC835A;
  --danger: #D03B3B;
  --info: #3987E5;
  --success-soft: rgba(12, 163, 12, .14);
  --warning-soft: rgba(250, 178, 25, .14);
  --danger-soft: rgba(208, 59, 59, .14);
  --info-soft: rgba(57, 135, 229, .14);

  /* — chart series — */
  --series-1: #3987E5;
  --series-2: #D95926;
  --series-3: #199E70;
  --series-4: #C98500;
  --series-5: #D55181;
  --series-6: #008300;

  /* — chart structure — */
  --grid: #1E1E24;
  --axis: #2A2A33;

  /* — shadow — */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .55);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7);
  --shadow-xl: 0 32px 80px -20px rgba(0, 0, 0, .8);

  /* — ring & glow — */
  --ring-inset: inset 0 0 0 1px rgba(255, 255, 255, .06);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 8px 32px -8px rgba(110, 90, 246, .5);

  /* — spacing (shared) — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* — radius (shared) — */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* — font size (shared) — */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;
  --fs-48: 48px;
  --fs-60: 60px;

  /* — line-height (shared) — */
  --lh-tight: 1.15;
  --lh-snug: 1.32;
  --lh-normal: 1.55;

  /* — tracking (shared) — */
  --ls-tighter: -.03em;
  --ls-tight: -.015em;
  --ls-wide: .08em;

  /* — motion (shared) — */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* — layout (shared) — */
  --sidebar-w: 248px;
  --sidebar-w-min: 64px;
  --topbar-h: 56px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* — z-index (shared) — */
  --z-nav: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* — fonts (shared) — */
  --font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* — light theme override — */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: #F7F7F8;
  --bg-surface: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-inset: #F2F2F4;
  --bg-hover: rgba(10, 10, 15, .04);
  --bg-active: rgba(10, 10, 15, .07);

  --border-subtle: rgba(10, 10, 15, .07);
  --border: rgba(10, 10, 15, .12);
  --border-strong: rgba(10, 10, 15, .22);

  --text-primary: #101014;
  --text-secondary: #55555F;
  --text-muted: #83838F;
  --text-inverse: #FFFFFF;

  --accent: #5B45E8;
  --accent-hover: #6E5AF6;
  --accent-active: #4A34D6;
  --accent-soft: rgba(91, 69, 232, .10);
  --accent-border: rgba(91, 69, 232, .30);

  --series-1: #2A78D6;
  --series-2: #EB6834;
  --series-3: #1BAF7A;
  --series-4: #EDA100;
  --series-5: #E87BA4;
  --series-6: #008300;

  --grid: #ECECEF;
  --axis: #D8D8DE;

  --shadow-sm: 0 1px 2px rgba(16, 16, 20, .06);
  --shadow-md: 0 4px 12px -2px rgba(16, 16, 20, .10);
  --shadow-lg: 0 16px 40px -12px rgba(16, 16, 20, .14);
  --shadow-xl: 0 32px 80px -20px rgba(16, 16, 20, .18);

  --ring-inset: inset 0 0 0 1px rgba(10, 10, 15, .05);
  --glow-accent: 0 0 0 1px var(--accent-border), 0 8px 32px -8px rgba(91, 69, 232, .25);
}