/* tokens.css — the design tokens of VERTEXNOVA.
 *
 * Components only ever use these SEMANTIC tokens (--surface, --text-2, --accent-solid …),
 * never a raw colour. A theme is one block of variables; a future per-customer brand theme is
 * one more block. Every text/control pairing below is checked against WCAG 2.2 AA by
 * tests/frontend/tokens-contrast.test.mts, which reads this file: change a colour here and
 * the test tells you if a combination dropped under 4.5:1 (text) or 3:1 (UI boundaries).
 *
 * Which block applies: <html data-theme="dark|light"> is set before first paint by
 * theme-init.js (stored choice, else the system preference). Dark is also the CSS default.
 */

:root {
  /* ---- typography ------------------------------------------------------------------ */
  --font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  /* A 12px floor: nothing is set smaller. */
  --fs-xs: 0.75rem;     /* 12 — captions, badges, table headers */
  --fs-sm: 0.8125rem;   /* 13 — helper text, dense UI */
  --fs-md: 0.875rem;    /* 14 — body, controls */
  --fs-lg: 1rem;        /* 16 — card titles */
  --fs-xl: 1.25rem;     /* 20 — key figures */
  --fs-2xl: 1.75rem;    /* 28 — page titles */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 650;

  /* ---- space (4px base), shape, layers, motion ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --control-h: 2.25rem;       /* 36 — buttons and fields */
  --control-h-touch: 2.75rem; /* 44 — on touch screens */
  --z-sticky: 30;
  --z-drawer: 60;
  --z-dialog: 70;
  --z-toast: 80;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- layout ------------------------------------------------------------------------ */
  --sidebar-w: 15.5rem;
  --topbar-h: 3.5rem;
  --bottombar-h: 3.5rem;
  --content-max: 72.5rem;
}

/* ============================ dark (primary experience) ============================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --bg: #090b10;
  --sidebar: #10131a;
  --surface: #171b24;
  --surface-2: #1e232e;
  --overlay: rgba(3, 4, 8, 0.66);
  /* lines */
  --border: #292f3b;          /* dividers, card edges (decorative) */
  --border-strong: #677183;   /* form-field edges, switch outline (>= 3:1) */
  /* text */
  --text: #f5f7fa;
  --text-2: #969ead;
  --placeholder: #969ead;
  /* brand accent: one for fills carrying white text, one for text/links on dark surfaces */
  --accent-solid: #6155e6;
  --accent-solid-hover: #5448d6;
  --accent-text: #9a91f5;
  --accent-subtle: #1e1b3f;
  --on-accent: #ffffff;
  --focus: #9a91f5;
  /* status: a fill, a text colour, and a calm background tint */
  --ok: #22c55e;   --ok-text: #4ade80;   --ok-subtle: #0f2a1b;
  --warn: #f59e0b; --warn-text: #fbbf24; --warn-subtle: #2e2008;
  --err: #ef4444;  --err-text: #f87171;  --err-subtle: #33151a;
  /* charts (categorical, colour-blind-safe by lightness; >= 3:1 on --surface) */
  --chart-1: #9a91f5; --chart-2: #38bdf8; --chart-3: #4ade80; --chart-4: #fbbf24;
  --chart-grid: #292f3b;
  /* skeleton shimmer */
  --skeleton-a: #1e232e; --skeleton-b: #292f3b;
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* ============================ light ============================ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --sidebar: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --overlay: rgba(14, 17, 22, 0.45);
  --border: #dde1e8;
  --border-strong: #7a8392;
  --text: #0e1116;
  --text-2: #556070;
  --placeholder: #556070;
  --accent-solid: #5546d6;
  --accent-solid-hover: #4a3cc4;
  --accent-text: #5546d6;
  --accent-subtle: #eeecfc;
  --on-accent: #ffffff;
  --focus: #5546d6;
  --ok: #146c37;   --ok-text: #146c37;   --ok-subtle: #e7f6ec;
  --warn: #b45309; --warn-text: #b45309; --warn-subtle: #fdf1e3;
  --err: #c81e1e;  --err-text: #c81e1e;  --err-subtle: #fcecec;
  --chart-1: #5546d6; --chart-2: #0369a1; --chart-3: #146c37; --chart-4: #b45309;
  --chart-grid: #dde1e8;
  --skeleton-a: #f1f3f6; --skeleton-b: #dde1e8;
  --shadow-popover: 0 8px 24px rgba(14, 17, 22, 0.14);
  --shadow-dialog: 0 16px 48px rgba(14, 17, 22, 0.2);
}