/* ═══════════════════════════════════════════════════════════════════════
   Ceres Meals — design tokens (single source of truth).

   Linked by every live in-app surface; replaces the per-page :root copies
   that had drifted and were reconciled (Width & Layout System §7 — this
   closes that follow-up). Change a colour, a tier, or the gutter here and it
   moves across the whole product.

   Page-specific tokens stay local to their page — Cook Mode's --field /
   --step-text / --ease and its dim-kitchen (data-kitchen="dim") override are
   not global and live in Cook Mode's own <style>.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — three warm cream tiers, no greys, no visible borders */
  --paper:     oklch(0.972 0.014 75);
  --surface-1: oklch(0.948 0.016 72);
  --surface-2: oklch(0.918 0.020 68);
  --hairline:  oklch(0.865 0.020 68);

  /* Ink — warm walnut, not black */
  --ink:       oklch(0.255 0.020 60);
  --ink-soft:  oklch(0.430 0.018 60);
  --ink-faint: oklch(0.620 0.012 60);

  /* Accents — terracotta is the decision colour; olive is the one reserved
     positive/nutrition signal. accent-soft normalised to 0.10 (Cohesion §6). */
  --accent:      oklch(0.555 0.135 35);
  --accent-soft: oklch(0.555 0.135 35 / 0.10);
  --accent-ink:  oklch(0.972 0.014 75);
  --olive:       oklch(0.500 0.060 110);

  /* Type — Zodiak display, General Sans body */
  --display: 'Zodiak', 'Fraunces', Georgia, serif;
  --body:    'General Sans', 'Manrope', system-ui, sans-serif;

  /* Page width tiers + fluid gutter (Width & Layout System §2–3).
     A tier is a *box* width incl. gutter (box-sizing: border-box). */
  --page-narrow:  880px;
  --page-content: 1040px;
  --page-wide:    1200px;
  --gutter: clamp(20px, 5vw, 56px);
}