/* ==========================================================================
   tokens.css - design tokens: fonts, colour, type scale, spacing, themes.

   Token Lab 2.0 identity: a dark NAVY base with purple (primary), cyan and blue
   accents. Dark is the default; a light theme uses the same semantic roles.

   Colour roles are semantic (--ink, --surface, --accent...). Components never
   use raw hex, so the theme swap happens in exactly one place (this file).

   Every text/background pair below was checked against WCAG AA (>= 4.5:1) in
   BOTH themes, and the chart palette (--s1..--s5) was validated for colour-blind
   separation and contrast against the NEW surface colours. In light mode three
   chart colours fall under 3:1 on white, so every chart ships labels, a legend
   and a table view.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---- type ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari',
    'Nirmala UI', 'Noto Sans Tamil', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Noto Sans Devanagari', 'Nirmala UI',
    monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-hero: clamp(2.1rem, 4.6vw, 3.25rem);

  /* ---- space & shape ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --topbar-h: 60px;
  --sidebar-w: 300px;
  --content-w: 940px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- colour: DARK NAVY (default) ---- */
  --bg: #0a0f1f;
  --surface: #111a33;
  --surface-2: #172245;
  --surface-3: #202b58;
  --ink: #eef1ff;
  --ink-2: #c3caec;
  --ink-3: #9aa5d3;
  --line: #243059;
  --line-2: #36447c;

  --accent: #a99bff; /* purple: links, primary buttons, active states */
  --accent-hover: #c4baff;
  --accent-soft: #221f55;
  --accent-ink: #0a0f1f; /* text ON an accent fill */
  --accent-2: #3be0f5; /* cyan: highlights, focus, progress */
  --accent-2-soft: #0e2f45;
  --focus: #3be0f5;

  --good: #5fe0a0;
  --good-bg: #0f2c27;
  --good-line: #1f6b55;
  --warn: #f6c65b;
  --warn-bg: #2c2410;
  --warn-line: #6f5718;
  --bad: #ff8f9a;
  --bad-bg: #3a1420;
  --bad-line: #7a2c3e;

  /* categorical chart palette (validated on this surface). Label ink on every fill is black (>= 4.5:1). */
  --s1: #3987e5; /* blue    */
  --s2: #d95926; /* orange  */
  --s3: #199e70; /* aqua    */
  --s4: #c98500; /* yellow  */
  --s5: #d55181; /* magenta */
  --s1-ink: #000000;
  --s2-ink: #000000;
  --s3-ink: #000000;
  --s4-ink: #000000;
  --s5-ink: #000000;
  --track: #243059; /* unfilled / free space */
  --track-ink: #c3caec;

  /* token chips: soft tints that only SEPARATE neighbours (never encode meaning) */
  --chip-1: #24407f;
  --chip-2: #5a3b22;
  --chip-3: #1b5249;
  --chip-4: #5a2b4c;
  --chip-5: #3f347f;
  --chip-byte: #1c2548;

  --glow-1: rgba(139, 92, 246, 0.16);
  --glow-2: rgba(34, 211, 238, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(2, 6, 20, 0.5);
  --ring: 0 0 0 3px rgba(59, 224, 245, 0.4);
}

/* ---- colour: LIGHT (viewer's choice via the theme toggle) ---- */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f4fb;
  --surface: #ffffff;
  --surface-2: #eceffa;
  --surface-3: #dfe4f6;
  --ink: #0e1430;
  --ink-2: #39426a;
  --ink-3: #565f87;
  --line: #dde1f2;
  --line-2: #bcc4e2;

  --accent: #5b46d8;
  --accent-hover: #4a36c4;
  --accent-soft: #ecebff;
  --accent-ink: #ffffff;
  --accent-2: #0a7f9a;
  --accent-2-soft: #dff4fa;
  --focus: #5b46d8;

  --good: #0a6b3d;
  --good-bg: #e3f5ec;
  --good-line: #8fd0ad;
  --warn: #7a4a00;
  --warn-bg: #fdf1d6;
  --warn-line: #ebc56a;
  --bad: #a82840;
  --bad-bg: #fbe8ec;
  --bad-line: #e8a5b3;

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --track: #dde1f2;
  --track-ink: #39426a;

  --chip-1: #dbe5ff;
  --chip-2: #ffe6cc;
  --chip-3: #d3f3e6;
  --chip-4: #fadfeb;
  --chip-5: #e6e0ff;
  --chip-byte: #e9ebf7;

  --glow-1: rgba(91, 70, 216, 0.1);
  --glow-2: rgba(10, 127, 154, 0.08);
  --shadow-sm: 0 1px 2px rgba(14, 20, 48, 0.06);
  --shadow-md: 0 1px 2px rgba(14, 20, 48, 0.05), 0 10px 30px rgba(14, 20, 48, 0.09);
  --ring: 0 0 0 3px rgba(91, 70, 216, 0.35);
}