/* ═══════════════════════════════════════════════════════════════
   ဖေဖေ့ ကျန်းမာရေး: design tokens (single source of truth)
   Metaphor: a Myanmar tear-off wall calendar (ပြက္ခဒိန်).
   Print colors: lacquer red + ink on warm paper, turmeric gold for
   celebration, leaf green for progress. See .impeccable.md.
   Load this BEFORE styles.css / calendar.css.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Paper & ink (neutrals tinted toward hue ~70) ── */
  --paper:      oklch(0.972 0.016 82);   /* page background, like newsprint */
  --surface:    oklch(0.993 0.007 82);   /* calendar sheet, cards */
  --sunk:       oklch(0.945 0.02 78);    /* wells, tracks, inactive */
  --line:       oklch(0.875 0.022 72);   /* hairlines, borders */
  --ink:        oklch(0.24 0.02 40);     /* body text */
  --ink-2:      oklch(0.46 0.028 50);    /* secondary text, still >= 4.5:1 on paper */

  /* ── Lacquer red: the date, primary actions ── */
  --red:        oklch(0.5 0.17 27);
  --red-ink:    oklch(0.43 0.15 27);     /* red text on light surfaces */
  --red-soft:   oklch(0.945 0.03 32);    /* tinted panels */
  --red-line:   oklch(0.82 0.07 30);

  /* ── Turmeric gold: celebration only (stamps, streaks, tear-off) ── */
  --gold:       oklch(0.78 0.14 80);
  --gold-ink:   oklch(0.5 0.1 75);
  --gold-soft:  oklch(0.955 0.05 88);

  /* ── Leaf: progress, done, success ── */
  --leaf:       oklch(0.52 0.12 150);   /* audit: 0.55 → 0.52 so white text on leaf buttons passes 4.5:1 (was 4.47) */
  --leaf-ink:   oklch(0.42 0.1 150);
  --leaf-soft:  oklch(0.95 0.04 150);

  /* ── Water: hydration, gentle reminders ── */
  --water:      oklch(0.6 0.1 235);
  --water-soft: oklch(0.95 0.03 235);
  --water-ink:  oklch(0.45 0.1 235);     /* water-coloured text (audit: --water as text was 3.6:1) */

  /* ── Text on filled colour (red, leaf, ink buttons); polish pass ── */
  --on-color:   oklch(0.99 0.01 80);
  --on-dark-2:  oklch(0.85 0.02 70);     /* secondary text on an ink panel */

  /* ── Medical alert: always boxed + ⚠ + words; never just colored text ── */
  --alert:      oklch(0.5 0.19 22);
  --alert-soft: oklch(0.95 0.035 22);

  /* ── Legacy aliases (pre-calendar names still used across styles.css) ── */
  --marigold:      var(--red);
  --marigold-ink:  var(--red-ink);
  --marigold-soft: var(--red-soft);

  /* ── Type ── */
  --f-body: "Noto Sans Myanmar", "Myanmar Text", "Pyidaungsu", system-ui, sans-serif;
  --f-head: "Noto Serif Myanmar", "Noto Sans Myanmar", "Myanmar Text", serif;
  --f-num:  "Bricolage Grotesque", "Noto Sans Myanmar", system-ui, sans-serif;

  /* 18px root; ≥1.25 steps. Burmese needs line-height ≥ 1.7 for stacked marks. */
  --t-sm:   0.889rem;  /* 16px: captions, legends */
  --t-md:   1rem;      /* 18px: body */
  --t-lg:   1.25rem;   /* 22.5px: card titles */
  --t-xl:   1.6rem;    /* 29px: screen titles */
  --t-2xl:  2.4rem;    /* 43px */
  --t-num:  3.4rem;    /* 61px: key numbers (weight) */
  --t-date: 7.5rem;    /* 135px: the calendar date numeral */

  /* ── Space (4pt scale, semantic names) ── */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;

  /* ── Shape: printed paper is square-ish; only buttons are pills ── */
  --r-xs: 4px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 50 / .12);   /* the one raised state: pressed segment */
  --focus-ring: 0 0 0 3px var(--red-soft);           /* inputs: border turns red + this ring */

  /* ── Touch targets ── */
  --hit:       48px;   /* minimum */
  --hit-yn:    60px;   /* yes/no answers */
  --hit-step:  72px;   /* weight stepper */
  --hit-shot:  84px;   /* the one-tap shot button */

  /* ── Motion ── (see docs/motion-plan.md)
     Paper settles, stamps land. Enter/exit = ease-out; move on screen = ease-in-out;
     constant progress (timers) = linear. UI stays under 300ms; only celebrations go longer. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* default: entrances, feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* things moving across the screen */
  --ease-sheet:  cubic-bezier(0.32, 0.72, 0, 1);     /* calendar sheet: swipe settle, tear away */
  --ease-stamp:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* small overshoot: rubber stamp landing. Rare moments ONLY */

  --dur-press:  120ms;   /* :active scale */
  --dur-fast:   160ms;   /* small state changes, fades, tab cross-fade */
  --dur:        240ms;   /* standard UI: entrances, sheet change, ack card */
  --dur-slow:   600ms;   /* celebrations only: tear-off, progress line growing */
  --dur-stamp:  420ms;   /* stamp/seal landing */

  --press-scale:     0.97;   /* buttons, chips, tiles */
  --press-scale-lg:  0.985;  /* big cards and rows (scale shows more on big things) */
  --enter-y:         8px;    /* entrance travel; 0 under reduced motion */
  --enter-x:         24px;   /* calendar day change travel; 0 under reduced motion */

  --tab-h: 68px;
}

/* Reduced motion = no travel, no overshoot. Every keyframe that moves reads these
   tokens, so it becomes a pure fade here with no per-component override. */
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --press-scale-lg: 1; --enter-y: 0px; --enter-x: 0px; --ease-stamp: var(--ease-out); }
}