/* Vitals design tokens.
 *
 * Anchor hue is 150, the mint already fixed by the app icon. Every neutral
 * carries a trace of that chroma, which is why the greys read as part of the
 * same object rather than as stock UI grey dropped on top.
 *
 * Dark only, and deliberately. This gets opened at 6am before the lights are
 * on and in a gym with the phone at arm's length. Ink sits at 95% lightness on
 * 14% paper, about 15:1, which stays readable outdoors too.
 */

:root {
  /* Surfaces. Elevation goes lighter, never darker. */
  --color-paper:    oklch(14% 0.012 150);
  --color-paper-2:  oklch(18% 0.014 150);
  --color-paper-3:  oklch(22% 0.014 150);
  --color-rule:     oklch(30% 0.012 150);
  --color-rule-soft: oklch(24% 0.012 150);

  /* Text. */
  --color-ink:      oklch(95% 0.008 150);
  --color-muted:    oklch(72% 0.008 150);
  --color-neutral:  oklch(62% 0.010 150);

  /* The one accent. Chroma pulled back and lightness raised for dark mode. */
  --color-accent:       oklch(84% 0.17 150);
  --color-accent-hot:   oklch(88% 0.17 150);   /* hover only, one step brighter */
  --color-accent-quiet: oklch(70% 0.14 150);
  --color-on-accent:    oklch(18% 0.03 150);

  /* Data signals, not brand colours.
   *
   * These three only ever encode a reading: a recovery band, a sleep band, a
   * warning on a stale sync. They never appear on chrome, buttons or links, so
   * the page still reads as a single-accent design. Every place they are used
   * also carries a word ("low", "solid"), because colour on its own fails for
   * the ~8% of men with red-green colour blindness, and this is a health app.
   */
  --color-signal-good: oklch(84% 0.17 150);
  --color-signal-mid:  oklch(82% 0.14 80);
  --color-signal-low:  oklch(70% 0.17 25);
  --color-signal-cool: oklch(78% 0.11 240);
  --color-on-signal-low: oklch(18% 0.02 25);  /* text on the red fill */

  /* Heart rate zones. An ordered ramp, not six identities: one hue that
   * brightens with intensity, so it reads correctly in greyscale and under
   * every kind of colour blindness. Every step clears 3:1 on --color-paper-2;
   * a darker first step did not, which is why zone 0 starts at 52%. */
  --color-zone-0: oklch(52% 0.08 150);
  --color-zone-1: oklch(60% 0.10 150);
  --color-zone-2: oklch(68% 0.13 150);
  --color-zone-3: oklch(75% 0.15 150);
  --color-zone-4: oklch(82% 0.16 150);
  --color-zone-5: oklch(88% 0.17 150);

  --color-focus: oklch(84% 0.17 150);

  /* Type.
   * Display is Bricolage Grotesque: a variable grotesque with a width axis, so
   * the big numbers can be drawn slightly condensed and read as instrument
   * readouts rather than as web headings.
   * Mono is one role only: machine-reported values and their units.
   */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Perfect fourth from a 15px base, rounded to whole pixels where it matters. */
  --text-2xs:  0.625rem;
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-readout: clamp(2rem, 9vw, 2.75rem);
  --text-field: 16px;   /* absolute on purpose: iOS zooms the page on focus below 16px, and the root here is 15px */

  /* 4pt scale. */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-tabbar: 104px;  /* clearance under the fixed tab bar */

  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-pill: 999px;

  --rule: 1px solid var(--color-rule-soft);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --shadow-card: 0 1px 2px oklch(6% 0.01 150 / 0.4), 0 8px 24px oklch(6% 0.01 150 / 0.25);
}