/* GENERATED by scripts/build-web-tokens.mjs — do not edit.
 *
 * Source of truth: src/theme/tokens.ts (D1). Run `npm run build:web-tokens` after
 * changing a colour there. Editing this file by hand is how the site and the app drift.
 *
 * Naming: camelCase in TS becomes kebab-case here — bgSunken -> --bg-sunken.
 *
 * The type ramp is emitted in PIXELS, matching the app's points 1:1. That is a real
 * decision rather than a unit coincidence: a 32px hero on a 390pt phone is a headline, and
 * on a 1240px page it is a subhead, so the site uses these as a RELATIVE ramp — the ratios
 * between steps — and sets its own absolute display sizes with clamp(). Body copy and
 * anything that has to feel like the app's own voice uses them directly.
 */

:root {
  --bg-page: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-sunken: #F1F4FA;
  --border-hairline: #E2E7F5;
  --border-strong: #C6D0EA;
  --text-primary: #161F49;
  --text-secondary: #666C7E;
  --text-muted: #6A6F81;
  --accent: #28397E;
  --accent-on-fill: #FFFFFF;
  --accent-soft: #DDE4F7;
  --moment-fill: #B56D0C;
  --moment-text: #9C5D0B;
  --moment-bg: #FBF3E1;
  --positive: #0B7A47;
  --negative: #B3261E;

  --type-hero-size: 32px;
  --type-hero-line: 37px;
  --type-hero-weight: 500;
  --type-hero-tracking: -0.64px;
  --type-display-size: 28px;
  --type-display-line: 34px;
  --type-display-weight: 600;
  --type-display-tracking: -0.28px;
  --type-title-size: 22px;
  --type-title-line: 28px;
  --type-title-weight: 500;
  --type-title-tracking: -0.22px;
  --type-heading-size: 17px;
  --type-heading-line: 23px;
  --type-heading-weight: 500;
  --type-body-size: 15px;
  --type-body-line: 22px;
  --type-body-weight: 400;
  --type-body-sm-size: 13px;
  --type-body-sm-line: 19px;
  --type-body-sm-weight: 400;
  --type-caption-size: 12px;
  --type-caption-line: 17px;
  --type-caption-weight: 400;
  --type-micro-size: 11px;
  --type-micro-line: 15px;
  --type-micro-weight: 400;
  --type-micro-tracking: 0.11px;

  /* Motion, in ms — the app's own durations so hovers and transitions feel related. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;

  /* The one derived value. Ochre is reserved (tokens doc, rule 2 of 4): a target rate was
   * hit, or the best provider today. On the site it appears exactly once, on the primary
   * call to action, which is the page's "your moment has come". Nowhere else. */
  --moment-hover: var(--moment-text);
}

/* Dark is emitted but not yet applied by the landing page — see the note in landing.css.
 * It ships now so the values exist the day the site opts in, rather than being re-derived. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='dark'] {
    --bg-page: #0E1422;
    --bg-card: #151E33;
    --bg-sunken: #0A0F1A;
    --border-hairline: #243049;
    --border-strong: #33415F;
    --text-primary: #F0F3F8;
    --text-secondary: #9FAFDB;
    --text-muted: #78869D;
    --accent: #7389C4;
    --accent-on-fill: #0E1422;
    --accent-soft: #1E2942;
    --moment-fill: #E0AE4A;
    --moment-text: #E0AE4A;
    --moment-bg: #2A2312;
    --positive: #4ADE80;
    --negative: #F87171;
  }
}