/* Design tokens mirrored 1:1 from app/src/theme/tokens.ts.
   The palette is the locked Stage 2 default (warm editorial, rose accent).
   When tokens.ts changes, change this file in the same commit. */

:root {
  color-scheme: light;

  /* colors */
  --background: #FFF9F4;
  --surface: #FFFFFF;
  --surface-alt: #FBF1E9;
  --text-primary: #2B2726;
  --text-secondary: #6A615D;
  --text-muted: #A19690;
  --border: #EFE3DC;
  --border-strong: #E3D2C8;
  --accent: #D58886;
  --accent-soft: #F2D9D5;
  --accent-ink: #7A3F40;
  --completion: #4D8E79;
  --completion-soft: #E8F4EE;
  --danger: #B85C50;

  /* `accent` is a light rose. It never carries text on a light surface
     (~2.3:1); `accent-ink` is its on-surface counterpart at ~8.5:1. */

  /* alpha-derived, from the `palette` map in tokens.ts */
  --accent-ink-sub: rgba(122, 63, 64, 0.7);
  --surface-translucent: rgba(255, 255, 255, 0.55);
  --text-primary-tint: rgba(43, 39, 38, 0.04);

  /* spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-tile: 14px;
  --r-pill: 999px;

  /* type. The app scale is fixed-px for a phone; the page needs it fluid,
     so the display sizes interpolate and the body sizes stay put. */
  --f-display: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  --f-h2: clamp(1.6rem, 1.1rem + 2vw, 2.35rem);
  --f-h3: 1.2rem;
  --f-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --f-body: 1.0625rem;
  --f-small: 0.9375rem;
  --f-caption: 0.8125rem;
  --f-eyebrow: 0.75rem;

  /* layout */
  /* 608px, about 66 characters in Plus Jakarta Sans at 17px. Deliberately not
     `ch`: that unit is the width of the "0" glyph, ~35% wider than this face's
     average letter, so 62ch measured out at nearly 100 characters. It also
     recomputes when the webfont swaps in, which moves layout and costs CLS. */
  --measure: 38rem;
  --page-max: 1120px;
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- web-only ---------------------------------------------------------
     Values with no counterpart in app/src/theme/tokens.ts, because the app has
     no equivalent surface. Kept here rather than inline in main.css so the
     palette stays in one file and nothing drifts unnoticed. Do not copy these
     back into the app. */

  /* Text on --completion-soft. 5.95:1, where --completion itself would be 2.9:1. */
  --completion-ink: #2F6555;
  /* Border for --completion-soft: the same hue one step darker than --border. */
  --completion-border: #CFE5DA;

  /* Device chrome for the phone mockups. Hardware colours, not UI colours -
     they describe a titanium iPhone and never carry text. */
  --device-bezel: #101012;
  --device-rail: #9C948C;
  --device-button: #8D867F;
}