/* =============================================================================
   tokens.css — the single source of truth for colour, type, space and motion.
   Nothing below this file hard-codes a hex value.

   Layers:
     1. primitives  raw ramps, never used directly by components
     2. scale       type / space / radius / shadow / motion
     3. semantic    role tokens, themed per colour scheme
     4. data        chart palette (validated for CVD + contrast, see README)
   ========================================================================== */

:root {
  /* --- 1. primitives ------------------------------------------------------ */
  --violet-100: #ece7ff;
  --violet-300: #b9a7ff;
  --violet-400: #9c85fb;
  --violet-500: #7c5cff;
  --violet-600: #6d3fe0;
  --violet-700: #4a3aa7;
  --cyan-400:   #22d3ee;
  --cyan-600:   #0e7490;

  --navy-950: #070a14;
  --navy-900: #0b1020;
  --navy-850: #0e1424;
  --navy-800: #131a2e;
  --navy-700: #1a2238;
  --navy-600: #26304b;

  --paper-50:  #ffffff;
  --paper-100: #f8f9fc;
  --paper-200: #f4f6fb;
  --paper-300: #eef1f8;
  --paper-400: #dfe4ef;

  --slate-100: #f5f7ff;
  --slate-300: #c3ccE4;
  --slate-400: #a6b0cc;
  --slate-500: #7c86a3;
  --slate-700: #4a5570;
  --slate-900: #0d1220;

  /* --- 2. scale ----------------------------------------------------------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  --fs-3xs: 0.625rem;  /* 10 */
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs:  0.75rem;   /* 12 */
  --fs-sm:  0.8125rem; /* 13 */
  --fs-md:  0.875rem;  /* 14 */
  --fs-base:0.9375rem; /* 15 */
  --fs-lg:  1.0625rem; /* 17 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */
  --fs-4xl: 2.375rem;  /* 38 */
  --fs-display: clamp(2.75rem, 4.6vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-14: 3.5rem;  --sp-16: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 460ms;
  --dur-4: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --sidebar-w: 264px;
  --content-max: 1540px;
  --topbar-h: 76px;

  --z-ambient: 0;
  --z-content: 1;
  --z-topbar: 20;
  --z-sidebar: 30;
  --z-drawer: 60;
  --z-toast: 80;

  /* --- 4. data palette (mode-invariant status) ---------------------------- */
  /* Status is reserved: good / warning / serious / critical never carry a
     series identity, and always ship with a label beside the colour. */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
}

/* --- 3. semantic roles — dark (default) ----------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --plane: var(--navy-950);
  --surface-1: var(--navy-850);
  --surface-2: var(--navy-800);
  --surface-3: var(--navy-700);
  --surface-raised: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --surface-sunken: rgba(0, 0, 0, 0.25);

  --ink-1: var(--slate-100);
  --ink-2: var(--slate-400);
  --ink-3: var(--slate-500);
  --ink-invert: var(--navy-950);

  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --focus-ring: var(--violet-400);

  --accent: var(--violet-500);
  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-ink: #ffffff;
  --accent-2: var(--cyan-400);
  --accent-gradient: linear-gradient(135deg, var(--violet-500), #4f46e5 70%);
  --brand-glow: 0 16px 40px rgba(124, 92, 255, 0.32);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 28px 80px rgba(0, 0, 0, 0.45);

  --panel-bg: linear-gradient(150deg, rgba(21, 28, 52, 0.86), rgba(11, 16, 32, 0.78));
  --glass-blur: blur(22px);

  /* chart chrome */
  --chart-surface: var(--navy-850);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: rgba(255, 255, 255, 0.14);
  --chart-ink: var(--slate-400);
  --chart-tooltip-bg: #131a2e;

  /* categorical slots — validated order, dark steps (see README) */
  --series-1: #9085e9;  /* violet — the default single-series hue */
  --series-2: #3987e5;  /* blue */
  --series-3: #d95926;  /* orange */
  --series-4: #199e70;  /* aqua */
  --series-5: #c98500;  /* yellow */
  --series-6: #d55181;  /* magenta */
  --series-7: #008300;  /* green */
  --series-8: #e66767;  /* red */
  --series-1-soft: rgba(144, 133, 233, 0.18);
  --series-muted: #4a5570;

  /* sequential ramp (one hue, light → dark) for ordered magnitude */
  --seq-1: #cde2fb; --seq-2: #86b6ef; --seq-3: #3987e5;
  --seq-4: #256abf; --seq-5: #184f95; --seq-6: #0d366b;
}

/* --- 3. semantic roles — light -------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --plane: var(--paper-200);
  --surface-1: var(--paper-50);
  --surface-2: var(--paper-100);
  --surface-3: var(--paper-300);
  --surface-raised: rgba(13, 18, 32, 0.03);
  --surface-hover: rgba(13, 18, 32, 0.06);
  --surface-sunken: rgba(13, 18, 32, 0.04);

  --ink-1: var(--slate-900);
  --ink-2: var(--slate-700);
  --ink-3: #6b7590;
  --ink-invert: #ffffff;

  --hairline: rgba(13, 18, 32, 0.1);
  --hairline-strong: rgba(13, 18, 32, 0.18);
  --focus-ring: var(--violet-600);

  --accent: var(--violet-600);
  --accent-soft: rgba(109, 63, 224, 0.1);
  --accent-ink: #ffffff;
  --accent-2: var(--cyan-600);
  --accent-gradient: linear-gradient(135deg, var(--violet-600), #4338ca 70%);
  --brand-glow: 0 14px 34px rgba(109, 63, 224, 0.22);

  --shadow-1: 0 1px 2px rgba(32, 44, 77, 0.08);
  --shadow-2: 0 10px 28px rgba(32, 44, 77, 0.1);
  --shadow-3: 0 24px 64px rgba(32, 44, 77, 0.14);

  --panel-bg: linear-gradient(150deg, #ffffff, #fbfcfe);
  --glass-blur: blur(18px);

  --chart-surface: var(--paper-50);
  --chart-grid: rgba(13, 18, 32, 0.08);
  --chart-axis: rgba(13, 18, 32, 0.16);
  --chart-ink: #6b7590;
  --chart-tooltip-bg: #171f33;

  /* light steps of the same eight hues */
  --series-1: #4a3aa7;
  --series-2: #2a78d6;
  --series-3: #eb6834;
  --series-4: #1baf7a;
  --series-5: #eda100;
  --series-6: #e87ba4;
  --series-7: #008300;
  --series-8: #e34948;
  --series-1-soft: rgba(74, 58, 167, 0.14);
  --series-muted: #a6b0cc;

  --seq-1: #cde2fb; --seq-2: #86b6ef; --seq-3: #3987e5;
  --seq-4: #256abf; --seq-5: #184f95; --seq-6: #0d366b;
}