/* ==========================================================================
   Split Test Pro — global design tokens (CU-86e3f96q2, New UI 0.1 / C1)

   The demo's `demo-ui/styles/tokens.css` verbatim (fonts re-pointed at the
   self-hosted files under /fonts/), followed by the demo `base.css` type
   ramp, the dark-mode `*-tint` partners (brand guide §9) and the light-theme
   token block from `demo-ui/styles/light.css`. Loaded BEFORE global.css,
   whose :root aliases (--bg, --ink, --accent, …) point at these names.

   Nothing in here is page-specific. New CSS uses these names directly; the
   aliases in global.css exist for the views that predate them.
   ========================================================================== */

@font-face {
  font-family:DM Sans;
  src:url(/fonts/dm-sans-regular.ttf) format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:DM Sans;
  src:url(/fonts/dm-sans-semibold.ttf) format('truetype');
  font-weight:500 800;
  font-style:normal;
  font-display:swap
}

:root {
  color-scheme:dark;

  /* --- Brand ------------------------------------------------------------ */
  --purple:#8b7aff;
  --purple-soft:rgba(139,122,255,.15);
  --purple-ghost:rgba(139,122,255,.1);
  --purple-edge:rgba(139,122,255,.3);

  /* Keyboard focus ring: the darkest brand-hue purple that still clears 3:1
     (WCAG 1.4.11) on every surface it lands on — ~3.1:1 on the lightest
     (hovered rows, the bulk bar, the active nav pill), 3.5:1 on the page,
     3.7:1 on the sidebar. Go darker and some of those fail. */
  --focus-ring:#6a5acd;

  /* --- Surfaces --------------------------------------------------------- */
  --page:#3e3b5e;          /* chat app backdrop */
  --canvas:#101026;        /* site content background */
  --panel:#0a0b1a;         /* sidebar + card ground */
  --panel-veil:rgba(10,11,26,.85);
  --overlay:rgba(12,13,32,.85);
  --caret:#6f6f8d;         /* text cursor: dimmer than the text itself */
  --line:#343441;
  --line-soft:rgba(255,255,255,.1);
  --scrollbar:#353758;     /* thumb colour, from the chat app's scroll areas */

  /* --- Text ------------------------------------------------------------- */
  --text:#fff;
  --muted:#c8c8e0;
  --faint:#8b8aaa;
  --faint-soft:#8a8aa8;
  --on-accent:#0a0b1a;     /* text sitting on a purple/pink fill */

  /* --- Status ----------------------------------------------------------- */
  --cyan:#5ec4e3;          /* running */
  --warn:#f9c16b;          /* scheduled / upcoming */
  --mint:#5ee3a4;          /* completed / positive result */
  --danger:#ff6b8a;        /* archived / destructive */
  --neutral:#c8c8e0;       /* draft */

  /* --- Radii ------------------------------------------------------------ */
  --r-xs:4px;
  --r-sm:5px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:10px;
  --r-pill:999px;

  /* --- Spacing ---------------------------------------------------------- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:40px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.18s;
}

@media (prefers-reduced-motion:reduce) {
  :root { --dur:0s }
}

/* --------------------------------------------------------------------------
   Type ramp (demo base.css). One scale drives every surface: `--type-scale`
   is the only knob — the site runs at 1; a narrow surface (the docked chat
   panel) can opt into a smaller ramp without re-declaring a second set of
   sizes, and every heading keeps its relationship to the body text.

   Line heights: tight for display type where the size carries the rhythm,
   snug for h3/h4, normal for anything that can wrap, ui for single-line
   labels inside a fixed-height control.
   -------------------------------------------------------------------------- */
:root {
  --type-scale:1;

  --fs-display:calc(38px * var(--type-scale));
  --fs-h1:calc(28px * var(--type-scale));
  --fs-h2:calc(24px * var(--type-scale));
  --fs-h3:calc(20px * var(--type-scale));
  --fs-h4:calc(16px * var(--type-scale));
  --fs-body:calc(14px * var(--type-scale));
  --fs-sm:calc(12px * var(--type-scale));
  --fs-xs:calc(11px * var(--type-scale));

  --lh-tight:1.15;   /* display, h1, h2 */
  --lh-snug:1.3;     /* h3, h4 */
  --lh-normal:1.5;   /* body copy that wraps */
  --lh-ui:1.2;       /* single-line labels inside fixed-height controls */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;

  --font:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
}

/* --------------------------------------------------------------------------
   Status tints (brand guide §9). In the dark theme one hue serves text and
   fill, so each tint is its status colour; the light block below swaps the
   base colours to deep shades for text/icons/edges and keeps these bright
   tints for fills (badge chips, banner tints, icon discs). Components use
   `--x` for text and `--x-tint` for fills so the theme ticket (0.3) only
   overrides.
   -------------------------------------------------------------------------- */
:root {
  --purple-tint:var(--purple);
  --cyan-tint:var(--cyan);
  --warn-tint:var(--warn);
  --mint-tint:var(--mint);
  --danger-tint:var(--danger);
  --neutral-tint:var(--neutral);
}

/* --------------------------------------------------------------------------
   Light theme (demo light.css, the token swap as-is). Inert until the theme
   ticket (0.3) sets `data-theme="light"` on <html>.

   CONTRAST AND OFF-WHITE
   Nothing is pure white: surfaces are #f5f5f8 on a #ececf2 page, and text
   on the purple and red fills is #f8f7fd. Text, muted and faint text clear
   4.5:1 on every surface, the purple-tinted rows and active nav included.
   Each status colour comes in two: a deep shade for text, icons and edges,
   and a bright tint (the dark theme's own hue) for fills. The deep shades
   keep their hue and saturation with the lightness taken down until badge
   text clears 5.0:1 on its chip over a ticked row, the most purple ground a
   badge sits on; purple went the same way to 5:1 against the active nav.
   Icons and the focus ring clear 3:1.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme:light;

  --purple:#5846d2;
  --purple-soft:rgba(88,70,210,.12);
  --purple-ghost:rgba(88,70,210,.07);
  --purple-edge:rgba(88,70,210,.35);
  --focus-ring:#6a5acd;           /* 4.5:1 on the active nav, its darkest ground */

  --page:#eceaf8;
  --canvas:#ececf2;
  --panel:#f5f5f8;
  --panel-veil:rgba(245,245,248,.92);
  --overlay:rgba(245,245,248,.92);
  --line:#dcdce6;
  --line-soft:rgba(20,20,43,.08);
  --scrollbar:#c6c6d8;

  --text:#14142b;
  --muted:#46465f;
  --faint:#616178;
  --faint-soft:#616178;
  --on-accent:#f8f7fd;            /* off-white on the deeper purple and red */

  --cyan:#145d73;
  --warn:#7e4f05;
  --mint:#12653e;
  --danger:#a60023;
  --neutral:#585872;

  /* Bright partners for the deep shades above: the dark theme's own hues,
     used only as fills (badge chips, banner tints, icon discs), so colour
     reads vivid while text and icons keep their contrast. */
  --purple-tint:#8b7aff;
  --cyan-tint:#5ec4e3;
  --warn-tint:#f9c16b;
  --mint-tint:#5ee3a4;
  --danger-tint:#ff6b8a;
  --neutral-tint:#c8c8e0;
}