/* ============================================================================
   tokens.css — design-token cascade reproduced from UI-SPEC.md §3–§4
   primitives (--cds-hsl-*) → aliases (--_*) → semantic (--bg/--text/--border)
   → component (--cds-*).  All colors stored as bare "H S% L%" triplets.
   ========================================================================= */

/* ---------- Geist, self-hosted ---------------------------------------------
   Two families and five files, shipped with the interface. No CDN and no font
   service: a stylesheet fetched from a third party tells that party who is
   reading the page and when, on every load, and this system answers to two
   external services only.

   `font-display: swap` so text is legible from the first paint. The files are
   subset to Latin, which is what this interface renders; anything outside it
   falls through the stack below.

   Geist Sans and Geist Mono are © 2023 Vercel, in collaboration with
   basement.studio, under the SIL Open Font Licence. The licence ships beside
   the files at assets/fonts/LICENSE-geist.txt. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/geist-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/geist-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Body and headlines. */
  --font-sans: 'Geist', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Eyebrows, labels, legends and figures — anything that should line up in a
     column or be read as data rather than prose. */
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The names the rest of the stylesheets already use, pointed at the above.
     Kept as aliases rather than renamed across every rule, so one family change
     stays one edit. */
  --font-ui: var(--font-sans);
  --font-ui-serif: var(--font-sans);
  --font-answer: var(--font-sans);
  --font-user-message: var(--font-sans);
  --font-sans-serif: var(--font-sans);
}

/* ---------- primitives: gray ramp ---------------------------------------- */
:root {
  --cds-hsl-gray-0:   0 0% 100%;
  --cds-hsl-gray-10:  60 14.2857% 98.6275%;
  --cds-hsl-gray-20:  60 14.2857% 97.2549%;
  --cds-hsl-gray-30:  60 10% 96.0784%;
  --cds-hsl-gray-40:  60 11.1111% 94.7059%;
  --cds-hsl-gray-50:  45 11.7647% 93.3333%;
  --cds-hsl-gray-60:  48 12.1951% 91.9608%;
  --cds-hsl-gray-80:  50 11.1111% 89.4118%;
  --cds-hsl-gray-90:  51.4286 11.4754% 88.0392%;
  --cds-hsl-gray-100: 52.5 11.7647% 86.6667%;
  --cds-hsl-gray-150: 54.5455 10.8911% 80.1961%;
  --cds-hsl-gray-200: 55 9.0909% 74.1176%;
  --cds-hsl-gray-300: 54.5455 5.7592% 62.549%;
  --cds-hsl-gray-350: 48 4.5872% 57.2549%;
  --cds-hsl-gray-450: 42.8571 2.9289% 46.8627%;
  --cds-hsl-gray-500: 40 2.8302% 41.5686%;
  --cds-hsl-gray-600: 45 2.5% 31.3725%;
  --cds-hsl-gray-650: 40 2.2222% 26.4706%;
  --cds-hsl-gray-700: 60 2.7523% 21.3725%;
  --cds-hsl-gray-750: 60 2.3256% 16.8627%;
  --cds-hsl-gray-800: 60 1.5873% 12.3529%;
  --cds-hsl-gray-810: 60 1.6949% 11.5686%;
  --cds-hsl-gray-830: 60 1.9608% 10%;
  --cds-hsl-gray-840: 60 2.1277% 9.2157%;
  --cds-hsl-gray-850: 0 0% 8.2353%;
  --cds-hsl-gray-860: 0 0% 7.451%;
  --cds-hsl-gray-870: 0 0% 6.6667%;
  --cds-hsl-gray-890: 0 0% 5.098%;
  --cds-hsl-gray-900: 0 0% 4.3137%;

  /* brand */
  --cds-hsl-azure:            212.0690 100.0000% 74.3137%;   /* #7cb9ff */
  --cds-hsl-azure-emphasized: 212.0690 100.0000% 65.8824%;   /* #51a2ff */
  /* The same hue carried down for light backgrounds.
     #51a2ff and #7cb9ff are chosen against near-black. On the light ground they sit at
     roughly 2:1 against the page — legible as a shape, not as text, which is what made the
     greeting read as dull rather than as accented. Hue and saturation are held so it is
     recognisably the same blue; only lightness moves. */
  --cds-hsl-azure-deep:       212.0690 88.0000% 44.0000%;   /* #0d69d3 */
  --cds-hsl-azure-deeper:     212.0690 92.0000% 34.0000%;   /* #0751a6 */

  /* accents */
  --cds-hsl-blue-100:   210 100% 92%;
  --cds-hsl-blue-200:   211 91% 78%;
  --cds-hsl-blue-350:   211 79% 64%;
  --cds-hsl-blue-450:   212 72% 54%;
  --cds-hsl-blue-500:   213 74% 48%;
  --cds-hsl-blue-600:   214 82% 41%;
  --cds-hsl-blue-750:   215 60% 22%;
  --cds-hsl-red-100:    2 90% 93%;
  --cds-hsl-red-200:    3 85% 80%;
  --cds-hsl-red-350:    4 74% 66%;
  --cds-hsl-red-400:    5 70% 58%;
  --cds-hsl-red-450:    6 68% 52%;
  --cds-hsl-red-600:    7 72% 42%;
  --cds-hsl-red-750:    8 55% 23%;
  --cds-hsl-green-100:  145 55% 90%;
  --cds-hsl-green-200:  148 45% 74%;
  --cds-hsl-green-400:  151 42% 47%;
  --cds-hsl-green-450:  152 46% 40%;
  --cds-hsl-green-600:  154 52% 30%;
  --cds-hsl-green-750:  155 40% 18%;
  --cds-hsl-yellow-100: 45 95% 90%;
  --cds-hsl-yellow-200: 43 90% 74%;
  --cds-hsl-yellow-350: 41 80% 62%;
  --cds-hsl-yellow-400: 40 76% 55%;
  --cds-hsl-yellow-450: 38 72% 48%;
  --cds-hsl-yellow-600: 35 74% 38%;
  --cds-hsl-yellow-750: 34 52% 20%;
  --cds-hsl-violet-100: 250 60% 93%;
  --cds-hsl-violet-200: 250 55% 80%;
  --cds-hsl-violet-350: 250 48% 68%;
  --cds-hsl-violet-400: 250 45% 60%;
  --cds-hsl-violet-450: 251 44% 54%;
  --cds-hsl-violet-600: 252 48% 42%;
  --cds-hsl-violet-750: 252 40% 24%;

  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
}

/* ---------- alias layer --------------------------------------------------- */
:root {
  --_gray-0: var(--cds-hsl-gray-0);       --_gray-10: var(--cds-hsl-gray-10);
  --_gray-20: var(--cds-hsl-gray-20);     --_gray-30: var(--cds-hsl-gray-30);
  --_gray-40: var(--cds-hsl-gray-40);     --_gray-50: var(--cds-hsl-gray-50);
  --_gray-60: var(--cds-hsl-gray-60);     --_gray-80: var(--cds-hsl-gray-80);
  --_gray-90: var(--cds-hsl-gray-90);     --_gray-100: var(--cds-hsl-gray-100);
  --_gray-150: var(--cds-hsl-gray-150);   --_gray-200: var(--cds-hsl-gray-200);
  --_gray-300: var(--cds-hsl-gray-300);   --_gray-350: var(--cds-hsl-gray-350);
  --_gray-450: var(--cds-hsl-gray-450);   --_gray-500: var(--cds-hsl-gray-500);
  --_gray-600: var(--cds-hsl-gray-600);   --_gray-650: var(--cds-hsl-gray-650);
  --_gray-700: var(--cds-hsl-gray-700);   --_gray-750: var(--cds-hsl-gray-750);
  --_gray-800: var(--cds-hsl-gray-800);   --_gray-810: var(--cds-hsl-gray-810);
  --_gray-830: var(--cds-hsl-gray-830);   --_gray-840: var(--cds-hsl-gray-840);
  --_gray-850: var(--cds-hsl-gray-850);   --_gray-860: var(--cds-hsl-gray-860);
  --_gray-870: var(--cds-hsl-gray-870);   --_gray-890: var(--cds-hsl-gray-890);
  --_gray-900: var(--cds-hsl-gray-900);
  --_brand-azure: var(--cds-hsl-azure);
  --_brand-azure-emphasized: var(--cds-hsl-azure-emphasized);
  --_brand-azure-deep: var(--cds-hsl-azure-deep);
  --_brand-azure-deeper: var(--cds-hsl-azure-deeper);
}

/* ---------- semantic mapping: v2 dark (default) -------------------------- */
[data-color-version="v2"][data-theme="alphe"][data-mode="dark"] {
  --bg-000: var(--_gray-750);
  /* The page itself is black. Every surface above it — cards, the composer, the
     sidebar — keeps its own grey, so the depth between them still reads. */
  --bg-100: 0 0% 0%;
  --bg-200: var(--_gray-840);
  --bg-300: var(--_gray-860);
  --bg-400: var(--_gray-900);
  --bg-500: var(--_gray-900);

  --text-000: var(--_gray-20);
  --text-100: var(--_gray-20);
  --text-200: var(--_gray-200);
  --text-300: var(--_gray-200);
  --text-400: var(--_gray-350);
  --text-500: var(--_gray-350);

  --border-100: var(--_gray-100);
  --border-200: var(--_gray-100);
  --border-300: var(--_gray-100);
  --border-400: var(--_gray-100);

  --accent-000: var(--cds-hsl-blue-200);
  --accent-100: var(--cds-hsl-blue-350);
  --accent-200: var(--cds-hsl-blue-350);
  --accent-900: var(--cds-hsl-blue-750);

  --accent-brand: var(--_brand-azure);
  --brand-000: var(--_brand-azure-emphasized);
  --brand-100: var(--_brand-azure);
  --brand-200: var(--_brand-azure);

  --danger-000: var(--cds-hsl-red-200);
  --danger-100: var(--cds-hsl-red-350);
  --danger-200: var(--cds-hsl-red-400);
  --danger-900: var(--cds-hsl-red-750);
  --success-100: var(--cds-hsl-green-400);
  --warning-100: var(--cds-hsl-yellow-350);
  --accent-pro-100: var(--cds-hsl-violet-350);

  --pictogram-100: var(--_gray-650);
  --pictogram-200: var(--_gray-700);
  --pictogram-300: var(--_gray-750);
  --pictogram-400: var(--_gray-800);

  color-scheme: dark;
}

/* ---------- semantic mapping: v2 light ----------------------------------- */
[data-color-version="v2"][data-theme="alphe"][data-mode="light"] {
  --bg-000: var(--_gray-0);
  --bg-100: var(--_gray-20);
  --bg-200: var(--_gray-40);
  --bg-300: var(--_gray-50);
  --bg-400: var(--_gray-80);
  --bg-500: var(--_gray-80);

  --text-000: var(--_gray-860);
  --text-100: var(--_gray-860);
  --text-200: var(--_gray-700);
  --text-300: var(--_gray-700);
  --text-400: var(--_gray-450);
  --text-500: var(--_gray-450);

  --border-100: var(--_gray-810);
  --border-200: var(--_gray-810);
  --border-300: var(--_gray-810);
  --border-400: var(--_gray-810);

  --accent-000: var(--cds-hsl-blue-600);
  --accent-100: var(--cds-hsl-blue-500);
  --accent-200: var(--cds-hsl-blue-500);
  --accent-900: var(--cds-hsl-blue-100);

  --accent-brand: var(--_brand-azure-deep);
  --brand-000: var(--_brand-azure-deeper);
  --brand-100: var(--_brand-azure-deep);
  --brand-200: var(--_brand-azure-emphasized);

  --danger-000: var(--cds-hsl-red-600);
  --danger-100: var(--cds-hsl-red-450);
  --danger-200: var(--cds-hsl-red-450);
  --danger-900: var(--cds-hsl-red-100);
  --success-100: var(--cds-hsl-green-450);
  --warning-100: var(--cds-hsl-yellow-450);
  --accent-pro-100: var(--cds-hsl-violet-450);

  --pictogram-100: var(--_gray-80);
  --pictogram-200: var(--_gray-100);
  --pictogram-300: var(--_gray-0);
  --pictogram-400: var(--_gray-20);

  color-scheme: light;
}

/* ---------- CDS component tokens ----------------------------------------- */
:root {
  --cds-radius: .25rem;
  --cds-h-control: 32px;
  --cds-leading-body: 20px;
  --cds-ring-inner: .5px;
  --cds-black: #000;
  --cds-oncolor-200: #f8f8f7bf;
  --cds-oncolor-300: #f8f8f780;

  --cds-shadow-sm: 0 1px 2px 0 #0000000d;
  --cds-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --cds-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

  --cds-ease-out: cubic-bezier(0, 0, .2, 1);
  --cds-ease-snap: cubic-bezier(.32, .72, 0, 1);
  --cds-duration-fast: 100ms;
  --cds-duration-base: 200ms;
  --cds-duration-snap: 150ms;

  --cds-font-weight-regular: 400;
  --cds-font-weight-medium: 500;
  --cds-font-weight-bold: 600;

  --dropdown-max-height: 480px;
  --msg-gap: 1.5rem;
  --msg-bubble-px: 1rem;
  --msg-bubble-py: .625rem;
  --msg-assistant-pb: .75rem;
  --msg-pill-py: .375rem;

  font-size: calc(100% * env(preferred-text-scale, 1));
}

/* derived surfaces — the "alpha" fills used by every hover state */
[data-mode="dark"] {
  --cds-alpha-2: hsl(var(--border-300) / .06);
  --cds-alpha-3: hsl(var(--border-300) / .10);
  --cds-alpha-7: hsl(var(--border-300) / .28);
  --cds-fill-ghost-hover: hsl(var(--border-300) / .08);
  --cds-fill-secondary: hsl(var(--border-300) / .07);
  --cds-hairline: hsl(var(--border-300) / .15);
  --cds-hairline-strong: hsl(var(--border-200) / .3);
  --cds-segmented-control-track: hsl(var(--border-300) / .06);
  --cds-segmented-control-thumb: hsl(var(--_gray-700));
  --cds-border: hsl(var(--border-300) / .12);
  --cds-page-bg: hsl(var(--bg-100));
  --cds-surface-1: hsl(var(--bg-000));
  --cds-surface-2: hsl(var(--bg-200));
  --cds-surface-3: hsl(var(--_gray-700));
  --cds-shadow-panel: 0 12px 32px -8px #00000080, 0 0 0 .5px hsl(var(--border-300) / .16);
  --cds-shadow-field: inset 0 0 0 .5px hsl(var(--border-300) / .15);
  --cds-cursor-interactive: default;
}
[data-mode="light"] {
  --cds-alpha-2: hsl(var(--border-300) / .05);
  --cds-alpha-3: hsl(var(--border-300) / .08);
  --cds-alpha-7: hsl(var(--border-300) / .22);
  --cds-fill-ghost-hover: hsl(var(--border-300) / .07);
  --cds-fill-secondary: hsl(var(--border-300) / .06);
  --cds-hairline: hsl(var(--border-300) / .14);
  --cds-hairline-strong: hsl(var(--border-200) / .22);
  --cds-segmented-control-track: hsl(var(--border-300) / .07);
  --cds-segmented-control-thumb: hsl(var(--bg-000));
  --cds-border: hsl(var(--border-300) / .14);
  --cds-page-bg: hsl(var(--bg-100));
  --cds-surface-1: hsl(var(--bg-000));
  --cds-surface-2: hsl(var(--bg-200));
  --cds-surface-3: hsl(var(--bg-000));
  --cds-shadow-panel: 0 12px 32px -8px #0000001f, 0 0 0 .5px hsl(var(--border-300) / .2);
  --cds-shadow-field: inset 0 0 0 .5px hsl(var(--border-300) / .18);
  --cds-cursor-interactive: default;
}