/* ============================================================================
   tokens.css: the ToAi design system, read off the live site.

   Every value here was measured from the Webflow build (its :root variables and
   the .tsv-* / .toai-* rules in toaihome.webflow.shared.403d32296.css), so the
   hand-coded site renders the same design without shipping a line of Webflow.
   ========================================================================== */

:root {
  /* ---- palette ---------------------------------------------------------- */
  --void: #070707;        /* page ground, --base-color--base on the live site */
  --panel: #12141c;       /* raised bands, cards, image wells */
  --rule: #2d2f3a;        /* hairlines and borders */
  --cyan: #23bae7;        /* primary accent, --accent-color--a-500 */
  --cyan-hot: #00f5ff;    /* the brighter cyan the AEO/FAQ/overlay chrome uses */
  --magenta: #e218bd;     /* secondary accent, --accent-color--a-300 */
  --white: #f2f2f5;       /* headings, high-emphasis text */
  --bright: #d2d4dc;      /* body copy */
  --label: #a0a2af;       /* labels, captions, fine print */

  /* tinted surfaces, kept as tokens so the AEO blocks stay in the system */
  --hairline-cyan: rgba(0, 245, 255, 0.22);
  --wash-white: rgba(255, 255, 255, 0.02);
  --text-soft: rgba(255, 255, 255, 0.82);
  --text-softer: rgba(255, 255, 255, 0.78);
  --overlay-ink: rgba(5, 6, 11, 0.85);

  /* ---- type ------------------------------------------------------------- */
  --font-display: 'Orbitron', 'Azeret Mono', monospace;   /* brand face, reserved for hero chrome */
  --font-ui: 'Azeret Mono', monospace;                    /* headings, labels, buttons */
  --font-body: 'DM Mono', 'Azeret Mono', monospace;       /* running copy */
  --font-terminal: 'Share Tech Mono', monospace;          /* terminal/readout accents */

  --fs-h1: 44px;
  --fs-h2: 28px;
  --fs-h3: 17px;
  --fs-lede: 17px;
  --fs-body: 15px;
  --fs-body-sm: 14px;
  --fs-card: 13.5px;
  --fs-meta: 13px;
  --fs-fine: 12px;
  --fs-price: 30px;
  --fs-stat: 30px;

  --lh-tight: 1.15;
  --lh-head: 1.2;
  --lh-body: 1.75;
  --lh-lede: 1.7;
  --lh-list: 1.8;

  --ls-label: 3px;
  --ls-wide: 2px;
  --ls-tight: 1px;
  --ls-brand: 4px;
  --ls-caps: 0.08em;

  /* ---- space ------------------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 64px;
  --s-11: 72px;
  --s-12: 120px;

  --wrap: 1040px;         /* the service-page container */
  --wrap-narrow: 880px;   /* the AEO / FAQ container */
  --measure: 760px;       /* comfortable reading width */
  --measure-wide: 820px;
  --gutter: 24px;

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 22px;
    --s-12: 72px;
  }
}

/* ============================================================================
   The type system (owner: type package, CINEMATIC-PLAN item 4).

   Everything above this line is the rebuild's original token set and is left
   exactly as it was: the homepage (home-page) and the business card
   (card-page) read it and are out of scope.

   Below: the type tokens every package consumes, for the one set Amir chose.
   They only apply to the service pages
   (body.tsv-page) and the rooms (body.room-page: /projects, /project/*,
   /welcome, /404, /robot).

     Brand editorial: Orbitron display, Geist body, Share Tech Mono labels.
     Amir chose it on 2026-09-25 ("font A") over B (Unbounded / Manrope) and
     C (Instrument Serif / Instrument Sans), which were compared on the draft
     and are gone.

   The set is only values here; type.css holds the rules that read them.

   Case: h1 to h3 stay in capitals, as they are on the live site.
   The SEO gate (audit.mjs) reads headings with innerText, which applies
   text-transform, and the baseline recorded them in capitals; a set in
   sentence case would fail heading[n] on every page although the HTML is
   untouched. Setting them in mixed case needs that comparison made case
   blind first (one line in audit.mjs, the lead's file).
   ========================================================================== */

/* The contract names that did not exist before, resolved on every page so a
   consumer never gets an invalid value. These are the plan's own fallbacks. */
:root {
  --font-label: 'Share Tech Mono', monospace;
  --fs-hero: clamp(44px, 7vw, 120px);
  --fs-lead: 17px;
  --tracking-display: 0.02em;
}

/* ---- shared, inner pages only ------------------------------------------ */
/* Zero specificity on purpose: a set block (below) or a component that sets a
   token on itself always wins. */
:where(.tsv-page, .room-page) {
  --font-label: 'Share Tech Mono', 'Share Tech Mono Fallback', ui-monospace, monospace;

  --fs-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);   /* 17 -> 18 */
  --fs-small: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);  /* 14 -> 15 */
  --fs-label: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem);   /* 12 -> 13 */

  --lh-body: 1.65;
  --lh-lead: 1.5;
  --lh-small: 1.55;
  --lh-h4: 1.35;

  --measure: 66ch;          /* running copy, at the copy's own size */
  --measure-lead: 34em;     /* the lead paragraph under a page title */

  --weight-body: 400;
  --weight-strong: 600;
  --tracking-label: 0.18em;

  /* The original tokens, re-pointed so every existing site.css / pages.css
     rule that reads them follows the set. Labels, buttons and chrome that
     were on --font-ui move to the label face; the headings that were on it
     are re-pointed to the display face in type.css. */
  --font-ui: var(--font-label);
  --font-terminal: var(--font-label);
  --fs-lede: var(--fs-lead);
  --fs-card: var(--fs-small);
  --fs-meta: var(--fs-label);
  --fs-fine: var(--fs-label);
  --lh-tight: var(--lh-display);
  --lh-head: var(--lh-heading);
  --lh-lede: var(--lh-lead);
  --lh-list: var(--lh-body);
  --ls-label: var(--tracking-label);
  --ls-wide: 0.12em;
  --ls-tight: 0.06em;
  --ls-caps: 0.1em;
  --ls-brand: var(--tracking-wordmark);
}

/* ---- A: Brand editorial ---------------------------------------------------
   The brand face at editorial scale. Orbitron is the homepage film's
   wordmark and claim face, so this set carries the film straight into the
   pages. Orbitron's capitals are its best letters, set large and tracked a
   touch open. Geist for reading. */
:root :is(.tsv-page, .room-page) {
  --font-display: 'Orbitron', 'Orbitron Fallback', sans-serif;
  --font-body: 'Geist', 'Geist Fallback', sans-serif;
  --font-h3: var(--font-body);
  --font-quote: var(--font-body);
  --font-button: var(--font-display);
  --font-wordmark: var(--font-display);
  --font-hud: var(--font-display);

  --fs-hero: clamp(2.125rem, 1.0571rem + 4.381vw, 5rem);         /* 34 -> 80 */
  --fs-h1: clamp(1.875rem, 1.1786rem + 2.8571vw, 3.75rem);       /* 30 -> 60 */
  --fs-h2: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem);          /* 24 -> 40 */
  --fs-h3: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);     /* 19 -> 22 */
  --fs-h4: clamp(1.125rem, 1.1018rem + 0.0952vw, 1.1875rem);     /* 18 -> 19 */
  --fs-lead: clamp(1.1875rem, 1.0946rem + 0.381vw, 1.4375rem);   /* 19 -> 23 */
  --fs-quote: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);  /* 19 -> 22 */
  --fs-stat: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);          /* 32 -> 56: 1,000s fits a 134px score */
  --fs-stat-card: 2.375rem;                                      /* 38: 11,000% fits a 190px card */
  --fs-price: clamp(1.125rem, 0.9161rem + 0.8571vw, 1.6875rem);  /* 18 -> 27 */
  --fs-button: clamp(0.7813rem, 0.7696rem + 0.0476vw, 0.8125rem); /* 12.5 -> 13 */
  --fs-wordmark: 0.9375rem;
  --fs-plate: 1.0625rem;

  --lh-display: 1.06;
  --lh-heading: 1.12;
  --lh-h3: 1.3;
  --lh-quote: 1.55;

  --weight-display: 600;
  --weight-heading: 600;
  --weight-h3: 600;
  --weight-button: 600;
  --weight-wordmark: 700;
  --weight-stat: 600;
  --weight-hud: 800;

  --tracking-display: 0.02em;
  --tracking-heading: 0.03em;
  --tracking-h3: 0.04em;
  --tracking-caps: 0.03em;
  --tracking-button: 0.12em;
  --tracking-wordmark: 0.16em;

  --case-display: uppercase;
  --case-heading: uppercase;
}