/* =====================================================================
   ETP DESIGN TOKENS
   The brand's source of truth. Every surface pins every value to one of
   these tokens. Add a new token only when an existing one cannot stretch
   to fit — and log the decision (see docs/decision-log.md).
   ===================================================================== */

:root {
  /* --- Type families ------------------------------------------------ */
  --font-display: 'Monument Wide', 'Arial Black', sans-serif;
  --font-body:    'Neue Montreal', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Tracking (three tokens, one per job) -------------------------- */
  /* Letter-spacing was untokenised until 2026-08-06 and had drifted to eleven
     literal values across the system, five of them on uppercase labels alone
     (0.06 / 0.08 / 0.10 / 0.12 / 0.14, plus a 0.16 in this folder's own
     components.css). These three are now the whole vocabulary. Tracking is a
     TYPE property, not spacing — it is deliberately out of scope for the
     layout ramp, and these are not spacing tokens. `--text-gap` sits in this
     same carve-out, for the same reason.
     Pick by the type's JOB, never by its size:
       label   — anything tracked UPPERCASE: buttons, meta, eyebrows, tags,
                 day names, section labels. The one value; do not re-tune it
                 per size. It reads as tracked from 10px to 13px.
       display — Monument Wide, lowercase, set tight. Headlines, day numbers,
                 day headings, picker titles.
       ui      — sentence-case controls and counts, which want a hair of air
                 but must not read as labels.
     Sentence-case BODY text takes no tracking at all — leave it unset, or
     `normal`. A zero here is the absence of tracking, not a fourth value. */
  --tracking-label:   0.10em;
  --tracking-display: -0.02em;
  --tracking-ui:      0.02em;

  /* --- Core palette (nine colors, no more) -------------------------- */
  --color-offwhite:   #f1e9dc;   /* page background; every surface starts here */
  --color-black:      #1a1612;   /* all ink; never pure #000 */
  --color-muted:      #998f82;   /* quiet labels, supplementary text, placeholders */
  --color-border:     #c8c0b8;   /* control borders, dividers; never a fill */
  --color-warning:    #994d24;   /* invalid inputs, closures; sparingly, never decorative */

  /* --- School accents (canonical) ------------------------------------- */
  /* Consumed via --color-accent and toggled live by JS. Do NOT reference
     --color-bali / --color-singapore directly in component CSS; always
     use --color-accent so per-school theming works. */
  --color-bali:       #4a6b5e;   /* sage — Bali school, default accent */
  --color-singapore:  #475669;   /* slate-blue — Singapore school */
  --color-accent:     #4a6b5e;   /* active theme color; resolves to a school accent */

  /* --- Derived color values ----------------------------------------- */
  /* 70%-alpha off-white: text on accent at quiet register, locked-field
     EDIT button, cart-on-accent labels. */
  --color-offwhite-soft: rgba(241, 233, 220, 0.7);
  /* 6% accent over off-white: the single, canonical row-hover background. */
  --color-accent-tint:   color-mix(in oklab, var(--color-accent) 6%, transparent);

  /* Accent scale opens at 100 / 50. The 50% step covers softer accent
     surfaces (secondary fills, soft borders, accent skeletons). A 20%
     step is intentionally undefined; add it only when a real surface
     needs it. */
  --color-bali-50:      color-mix(in oklab, var(--color-bali) 50%, var(--color-offwhite));
  --color-singapore-50: color-mix(in oklab, var(--color-singapore) 50%, var(--color-offwhite));
  --color-accent-50:    var(--color-bali-50);

  /* --- Spacing (layout distances) ----------------------------------- */
  /* The ramp. A distance belongs here because it is a STEP on it; see
     CLAUDE.md constraint 8 for what stays off the ramp and why. */
  --space-1:        8px;    /* first step */
  --space-2:       16px;    /* second step */
  --space-3:       24px;    /* third step */
  --space-4:       32px;    /* fourth step */
  /* Off the ramp, deliberately: the distance inside a pair of type that reads
     as one utterance — a time and its suffix, a title and its teacher. It
     answers legibility, not how open the page is, so it sits with the tracking
     tokens in the type-property carve-out above. */
  --text-gap:       4px;
  --control-height: 48px;   /* every interactive control: inputs, buttons, dropdowns, toggles */

  /* --- Modal -------------------------------------------------------- */
  --modal-max-width: 720px;
  --modal-padding-y: 64px;
  --modal-padding-x: 48px;

  /* --- Quiet overlay ------------------------------------------------ */
  /* The sibling .page-fade element fades in to this opacity over this
     background when body has .modal-open. */
  --overlay-quiet-bg:      var(--color-offwhite);
  --overlay-quiet-opacity: 0.6;

  /* --- Motion (state changes, and the modal pair) ------------------- */
  /* --transition-fast is the speed for state changes: hover, border swap,
     color swap, transform, accent fill. The modal pair is the exception —
     panel entry and exit. Entry eases out, exit eases in and runs shorter.
     A further speed requires explicit rationale, logged before it is
     added. */
  --transition-fast:      175ms ease;
  --transition-modal-in:  325ms cubic-bezier(0, 0, 0.2, 1);
  --transition-modal-out: 250ms cubic-bezier(0.4, 0, 1, 1);

  /* --- Pulse -------------------------------------------------------- */
  --pulse-skeleton: 0.8s ease-in-out;
}

/* =====================================================================
   PER-SCHOOL ACCENT CASCADE
   JS sets data-school on <html>; these blocks rebind --color-accent and
   --color-accent-50 to the active school. The :root default keeps Bali, so
   a missing data-school attribute still renders correctly.
   ===================================================================== */
[data-school="bali"] {
  --color-accent:    var(--color-bali);
  --color-accent-50: var(--color-bali-50);
}
[data-school="singapore"] {
  --color-accent:    var(--color-singapore);
  --color-accent-50: var(--color-singapore-50);
}