/* bidi design tokens: the one place a token gets its value.

   The dark UI the founder approved on 15 October 2026 (Linear-inspired, the dark homepage draft). Every page
   links this file first, before its other styles. Three parts:

   1. The reference design's token set as it stands: colour, families, the spacing scale and its roles, insets,
      the layout grid, fixed heights, radii, the ten type roles and motion, with its breakpoint overrides.
   2. Status colours for the dark panels: text that keeps 4.5:1 on every panel, and a soft fill behind it.
   3. Aliases: every name the site's CSS used before the dark UI, mapped onto a dark value, so the rules that
      still use them render dark without each one being found and rewritten.

   Then a short base layer (body, headings, focus, selection, form controls, scrollbars). Its rules sit inside
   :where(), so any rule of a page or of the kit still wins over it.

   Contrast on the panels (WCAG, the tokens' own values): --text 17.9:1, --text-2 5.9:1, --cobalt-2 9.7:1,
   --ok 8.6:1, --warn 9.4:1, --err 8.1:1, --orange 7.7:1. --text-3 is 3.3:1: large text, icons and hairline
   parts only, never small words. Cobalt (#2A5BE0) is 3.3:1: fills (white words on it are 5.7:1) and rings,
   never words. A field's edge is --field-line (3.3:1), never a hairline (--line-2 is 1.5:1). */

/* ==== 1. The reference design's tokens ==== */
:root {
  color-scheme: dark;

  /* ---------- Colour ---------- */
  --ground: #08090A;
  --panel: #0F1011;
  --raised: #16171A;
  --lift: #1C1D21;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --text: #F7F8F8;
  --text-2: #8A8F98;
  --text-3: #62666D;
  --field-line: var(--text-3);   /* a field's own edge: 3.3:1 on the panels, the 3:1 a control's boundary needs (WCAG 1.4.11) */
  --cobalt: #2A5BE0;
  --cobalt-2: #9DB8FF;
  --ok: #4CC38A;
  --orange: #FB8500;
  --pill: #F7F8F8;
  --pill-ink: #08090A;

  /* ---------- Families ---------- */
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- Spacing scale: 4px x {1,2,3,4,6,8,12,16,24,32}. The only spacing values allowed. ---------- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-128: 128px;

  /* ---------- Spacing roles: one relationship = one token ---------- */
  --pair: 4px;            /* subtitle-size title -> its own text; input -> its error slot */
  --row: 8px;             /* label -> control; eyebrow -> text; rows of one list; title -> its text; name -> price -> summary */
  --stack: 12px;          /* blocks stacked in one card or form; list head -> list; control -> note under it */
  --split: 16px;          /* content <-> hairline inside a card; button -> note beside it */
  --block: 24px;          /* multi-line list items; card content -> its own action; tabs -> panel; block -> footnote */
  --cta: 32px;            /* text -> the section's call to action */
  --headline-lede: 24px;  /* .h2 -> lede          XL 24 . L 24 . M 16 . S 16 */
  --display-lede: 24px;   /* .h1 -> lede          XL 24 . L 24 . M 24 . S 16 */
  --group: 48px;          /* head -> content; stacked halves; footer padding   XL/L/M 48 . S 32 */
  --showcase: 64px;       /* hero copy -> stage   XL 64 . L 64 . M 48 . S 48 */
  --head-top: 96px;       /* header -> first heading   XL 96 . L 96 . M 64 . S 48 */
  --sec: 128px;           /* section padding-block     XL 128 . L 96 . M 96 . S 64 */

  /* Insets: text distance from a surface's inner edge */
  --in-s: 16px;           /* compact cards, interactive rows, inputs */
  --in-m: 24px;           /* cards: tier, plan, ent, addon, cap, fine, table edge cells */
  --in-l: 32px;           /* panels: form, panel, band, sign-in card   S 24 */

  /* ---------- Layout grid ---------- */
  --cols: 12;
  --gutter: 24px;         /* S 16 */
  --margin: 36px;         /* minimum outer margin   L 44 . M 32 . S 24 . XS 16 */
  --container: 1224px;    /* 12 x 80 + 11 x 24   L 936 . M/S fluid (100%) */
  --measure: 648px;       /* lede, answers (about 65 characters of lede) */
  --measure-head: 744px;  /* .sec-head */
  --measure-hero: 840px;  /* hero copy */
  --measure-title: 1016px; /* .page-head h1 and the home statement (span 10) */

  /* ---------- Fixed heights ---------- */
  --h-xs: 24px;           /* chips, status, markers */
  --h-sm: 32px;           /* small buttons, nav links, seg tabs   S 40 (tap target) */
  --h-md: 40px;           /* default button, menu button, logo and back-link hit areas */
  --h-lg: 48px;           /* large button, input, linkbox, code caption bar */
  --h-xl: 56px;           /* OTP digit, accordion row */
  --h-bar: 72px;          /* header and sign-in bar   S 64 */

  /* ---------- Radii: about a quarter of the element's height, capped at 20 ---------- */
  --r-xs: 6px;            /* boxes 24px tall or less */
  --r-sm: 8px;            /* rows, slots, small boxes (28-40px) */
  --r-md: 12px;           /* inputs, code, notices, rows with a soft pill */
  --r-lg: 16px;           /* cards */
  --r-xl: 20px;           /* panels and stages */
  --r-pill: 999px;

  /* ---------- Type roles: font shorthand + tracking (values per breakpoint below) ---------- */
  --type-display:  600 64px/68px var(--display);  --track-display: -0.045em;
  --type-headline: 600 48px/52px var(--display);  --track-headline: -0.035em;
  --type-title:    600 28px/32px var(--display);  --track-title: -0.02em;
  --type-price:    600 32px/36px var(--display);  --track-price: -0.03em;
  --type-subtitle: 600 18px/24px var(--display);  --track-subtitle: -0.01em;
  --type-lede:     400 18px/28px var(--body);
  --type-body:     400 16px/24px var(--body);
  --type-small:    400 14px/20px var(--body);
  --type-caption:  400 13px/20px var(--body);
  --type-micro:    400 12px/16px var(--body);
  --type-wordmark: 600 20px/24px var(--display);  --track-wordmark: -0.045em;  /* the h1's face: Sora 600, same tracking */
  --type-statement: 500 40px/48px var(--display); --track-statement: -0.035em;  /* the home statement */
  --type-figure:    600 24px/28px var(--display); --track-figure: -0.03em;      /* counters in the home stage */
  --track-caps: 0.1em;

  /* ---------- Motion: 120 BPM, everything on the beat ---------- */
  --beat: 500ms;
  --dur-press: 125ms;     /* 1/4 beat: :active scale, OTP focus scale */
  --dur-fade: 250ms;      /* 1/2 beat: opacity of overlays, pill fade, notices */
  --dur-move: 500ms;      /* 1 beat: pill slide, nudges, rotate, lift, panel/answer enter, FLIP */
  --dur-reveal: 1000ms;   /* 2 beats: scroll reveal (transform only) */
  --spring: cubic-bezier(.22,1,.36,1);            /* fallback; linear() below */
  --ease-fade: cubic-bezier(.25,.1,.25,1);        /* opacity only */
}
/* L: 1024-1199 */
@media (max-width: 1199.98px) {
  :root {
    --sec: 96px;
    --margin: 44px;
    --container: 936px;
    --measure-title: 936px;
    --type-headline: 600 44px/48px var(--display);
    --type-statement: 500 36px/44px var(--display);
  }
}
/* M: 768-1023 */
@media (max-width: 1023.98px) {
  :root {
    --headline-lede: 16px;
    --showcase: 48px;
    --head-top: 64px;
    --cols: 8;
    --margin: 32px;
    --container: 100%;
    --type-display:  600 56px/60px var(--display);  --track-display: -0.035em;
    --type-headline: 600 36px/40px var(--display);  --track-headline: -0.03em;
    --type-title:    600 24px/28px var(--display);
    --type-statement: 500 32px/40px var(--display);
  }
}
/* S: 360-767 (checked at 390) */
@media (max-width: 767.98px) {
  :root {
    --display-lede: 16px;
    --group: 32px;
    --head-top: 48px;
    --sec: 64px;
    --in-l: 24px;
    --cols: 4;
    --gutter: 16px;
    --margin: 24px;
    --h-sm: 40px;
    --h-bar: 64px;
    --type-display:  600 40px/44px var(--display);  --track-display: -0.03em;
    --type-statement: 500 24px/32px var(--display); --track-statement: -0.025em;
    --type-headline: 600 32px/36px var(--display);
    --type-subtitle: 600 16px/24px var(--display);
    --type-lede:     400 16px/24px var(--body);
  }
}
/* XS: below 360 */
@media (max-width: 359.98px) {
  :root { --margin: 16px; }
}
/* Touch screens at any width (768 is iPad portrait): small controls are tap targets too */
@media (pointer: coarse) {
  :root { --h-sm: 40px; }
}
/* Critically damped spring, K = 7.5: the same E(p) as the reference motion engine, sampled at 20 stops (max error 0.4%). */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .016 2.5%, .055 5%, .110 7.5%, .174 10%, .242 12.5%, .312 15%, .379 17.5%, .444 20%, .562 25%, .661 30%, .741 35%, .805 40%, .854 45%, .892 50%, .943 60%, .972 70%, .987 80%, .996 90%, 1); }
}

/* ==== 2. Status on the dark panels ==== */
:root {
  /* Words: 4.5:1 or more on --ground, --panel, --raised and --lift (green 7.6 to 9.0, amber 8.3 to 9.8,
     red 7.2 to 8.5). --err-line is the border of a field that needs fixing (4.9:1 on --panel, a UI part). */
  --warn: #F5A623;
  --err: #FF8589;
  --err-line: #E5484D;
  /* Soft fills: each status colour at 12% over --panel, solid, so the words on them keep their ratio
     (green 7.2, amber 7.7, red 7.3; --text on any of them 14.7 or more). */
  --ok-soft: #162520;
  --warn-soft: #2B2213;
  --err-soft: #291718;
  /* Cobalt at 16% and 26% over --panel, for a selected or hovered row and an icon tile. --text 15.9 and 14.3 on them. */
  --cobalt-soft: #131C32;
  --cobalt-soft-2: #162447;
}

/* ==== 3. Aliases: the names the site used before the dark UI ==== */
:root {
  /* The page tokens (site.css, auth.css and the pages' own style blocks) */
  --bg: var(--ground);
  --surface: var(--panel);
  --fg: var(--text);
  --muted: var(--text-2);
  --border: var(--line);
  /* The accent used to be read as words and links as often as it was a fill: on dark it is the light cobalt,
     which reads at 9.7:1 and carries dark words (a fill of it under --surface words is 9.7:1 too). */
  --accent: var(--cobalt-2);
  --signature: var(--orange);
  --prism-cyan: oklch(0.72 0.14 220);
  --prism-violet: oklch(0.62 0.19 300);
  --prism-coral: oklch(0.72 0.17 30);
  --font-display: var(--display);
  --font-body: var(--body);
  --font-mono: var(--mono);
  /* Arabic lines read in IBM Plex Sans Arabic (OFL), loaded with the other Google Fonts. */
  --font-arabic: "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  /* The kit (ui.css) and the pages' refined layer */
  --ink: var(--text);
  --accent-2: var(--cobalt);         /* fills and rings; words on dark take --cobalt-2 */
  --accent-3: var(--cobalt-2);
  --tint: var(--cobalt-soft);
  --tint-2: var(--cobalt-soft-2);
  --line-strong: var(--line-2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 24px 64px -24px rgba(0,0,0,.8);
  --shadow-accent: 0 8px 24px -8px rgba(42,91,224,.5);
  /* White words read at 4.8:1 or more at every stop of the cobalt gradient. */
  --grad-accent: linear-gradient(180deg, #3769E6 0%, #2A5BE0 100%);
  --grad-accent-hover: linear-gradient(180deg, #3A6DEC 0%, #2F63E9 100%);
  --ok-text: var(--ok);
  --warn-text: var(--warn);
  --err-text: var(--err);
  --ok-fill: var(--ok-soft);
  --warn-fill: var(--warn-soft);
  --err-fill: var(--err-soft);
  --ui-radius: var(--r-md);
  --ui-radius-lg: var(--r-xl);
  --ui-ease: var(--spring);
  --ui-dur: var(--dur-fade);
  --ui-z-overlay: 100;   /* drawer, modal, palette (above the sticky header at 60) */
  --ui-z-toast: 120;
  --ui-z-tooltip: 130;

  /* index.html and setup.html */
  --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
  --fg-soft: color-mix(in oklch, var(--fg) 7%, transparent);
  --glass: color-mix(in oklch, var(--surface) 74%, transparent);
  --fs-h1: clamp(54px, 5.05vw, 73px);
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-meta: 12px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 96px;
  --radius: var(--r-md);
  --radius-lg: var(--r-xl);

  /* The pages' own frame (.container) keeps its width and side room until each page moves to the grid
     above (.wrap: --container wide, --margin at the sides), as the header and the footer already have. */
  --page-container: 1220px;
  --page-gutter: 28px;
}
@media (max-width: 600px) {
  :root { --page-gutter: 18px; }
}
@media (max-width: 560px) {
  :root { --fs-h1: clamp(42px, 13vw, 58px); }
}

/* ==== Base: what every page stands on (zero specificity, so a page's or the kit's own rule wins) ==== */
:where(html) { background: var(--ground); accent-color: var(--cobalt); scrollbar-color: #3A3D44 transparent; }
:where(body) { background: var(--ground); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, h4) { font-family: var(--display); font-weight: 600; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
::selection { background: var(--cobalt); color: #fff; }
/* The reference grid's frame: --container wide, --margin at the sides. The header and the footer stand on it;
   each page's body moves onto it in turn (the pages' .container keeps their old frame until then). */
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--container) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
/* Form controls and scrollbars follow color-scheme above. The surfaces that show a customer's own look (the
   test chat, the widget preview, the hosted chat) set color-scheme: normal and scrollbar-color: auto on their
   own root, so nothing of the dark site reaches inside them. */