/*
 * EczemaBaby design tokens: THE token file (DS-2, CEN-167). Round 3 values (CEN-166,
 * 2026-09-27); ratification status lives on CEN-166 and does not change this file's role.
 *
 * This is the only hand-edited copy. Every other copy is GENERATED from it by
 * scripts/design/generate_tokens.mjs and checked for drift by pre-commit and
 * tests/test_design_tokens.py:
 *   admin/src/app/tokens.generated.css   the same custom properties, verbatim
 *   mobile/theme/tokens.generated.js     hex / rgba colors, numeric radius, text sizes, spacing
 *   src/app/design_tokens.py             opaque hex for email and server-rendered HTML
 * Edit a value here, run `node scripts/design/generate_tokens.mjs`, commit all four files.
 *
 * Read by client/src/app/globals.css (@import), which maps the shadcn semantic names onto
 * these tokens and exposes each one as a Tailwind utility. Never write a value anywhere else
 * (the Supervious drift lesson, blueprint §4).
 *
 * Doctrine: docs/specs/EBABY_DESIGN_CRITIC_AUDIT.md and design/README.md.
 * Contrast: every text token below is checked against its grounds (WCAG AA 4.5:1 for text,
 * 3:1 for icons and focus rings). Ratios are in the comments.
 */

:root {
  /* ── Ground: paper, not glass. Every surface is opaque. ── */
  --paper:        oklch(0.975 0.014 82);   /* the desk: page ground */
  --paper-card:   oklch(0.995 0.006 85);   /* a sheet on the desk: cards, other chat bubbles */
  --paper-inset:  oklch(0.955 0.016 84);   /* inputs, wells, empty-state tiles */

  /* ── Ink: one ink with an alpha ramp and no greys. Four text steps, all AA. ── */
  --ink:          oklch(0.235 0.03 60);          /* titles */
  --ink-80:       oklch(0.235 0.03 60 / 0.80);   /* body                          ≥ 8:1  */
  --ink-65:       oklch(0.235 0.03 60 / 0.65);   /* secondary, meta, provenance,
                                                    eyebrows, tab labels          ≥ 4.97:1 */
  --ink-50:       oklch(0.235 0.03 60 / 0.50);   /* icons and chevrons only, never text  3.2:1 */
  --ink-12:       oklch(0.235 0.03 60 / 0.12);   /* quiet-button outline, pressed, strong divider */
  --ink-08:       oklch(0.235 0.03 60 / 0.08);   /* THE hairline, and the only border */

  /* ── Brand: one green. ── */
  --pine:         oklch(0.40 0.058 168);   /* primary button, links, active tab   8.3:1 on paper */
  --pine-deep:    oklch(0.30 0.045 168);   /* pressed */
  --pine-wash:    oklch(0.945 0.022 165);  /* "working" tag, receipt row */
  --pine-ink:     oklch(0.30 0.045 168);   /* text on pine-wash                  11.5:1 */
  --on-pine:      oklch(0.995 0.006 85);   /* text on a pine fill                 8.8:1 */

  /* ── Accent: marigold. The focus ring and the "new" tag, nothing else. ── */
  --focus:        oklch(0.62 0.13 72);     /* focus ring                  3.5:1 on paper */
  --marigold-wash:oklch(0.955 0.045 85);   /* "new" tag fill */
  --marigold-ink: oklch(0.42 0.09 70);     /* text on marigold-wash               7.6:1 */

  /* ── Signals: the only other hues permitted. ── */
  --caution:      oklch(0.60 0.12 58);     /* caution icon                3:1+ on wash */
  --caution-wash: oklch(0.955 0.03 70);    /* callout and "watching" tag fill */
  --caution-ink:  oklch(0.45 0.10 55);     /* text on caution-wash                6.7:1 */
  --alert:        oklch(0.53 0.17 28);     /* true adverse / destructive, and the eliminate food tier */
  --alert-wash:   oklch(0.95 0.03 25);     /* eliminate food tier fill (Weston, 2026-10-02) */
  --alert-ink:    oklch(0.45 0.15 28);     /* text on alert-wash                   6.8:1 */

  /* ── Photo scrim: the age badge on a photo. ── */
  --scrim:        oklch(0.235 0.03 60 / 0.72);   /* photo age badge ground */
  --on-scrim:     oklch(0.995 0.006 85);         /* badge text, same in both modes  ≥ 8:1 */

  /* ── Type: two faces with weight discipline. ── */
  --font-display: "Instrument Serif", Georgia, serif;            /* 400 roman + italic ONLY */
  --font-body:    "Inter", -apple-system, system-ui, sans-serif; /* 400 / 500 / 600 ONLY */

  /* Seven sizes with a 12px floor; nothing else ships. */
  --text-12: 0.75rem;    /* eyebrow, provenance, meta, tab labels, badges */
  --text-14: 0.875rem;   /* secondary, buttons (small), tags, key/value */
  --text-16: 1rem;       /* body, buttons, chat, and the phone default */
  --text-19: 1.1875rem;  /* lede, TCM line */
  --text-24: 1.5rem;     /* card title (serif) */
  --text-32: 2rem;       /* screen title (serif) on pushed screens */
  --text-40: 2.5rem;     /* screen title on tab-root screens; numerals (serif) */

  /* Optical tracking ramp: tighter as the type grows. */
  --track-40: -0.025em;
  --track-32: -0.02em;
  --track-24: -0.012em;
  --track-eyebrow: 0.12em;  /* 12px · 500 · uppercase · ink-65, the only eyebrow style */

  /* ── Geometry ── */
  --radius:      16px;   /* every card, input, button, callout, photo, tile */
  --radius-tail: 6px;    /* the one corner of a chat bubble that points at its sender */
  --radius-pill: 999px;  /* tags, avatars, age badges, the send button */

  /* 4px base. Phone gutter = space-5. Card padding = space-5. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* Icons: Lucide, 1.6 stroke, currentColor. */
  --icon-sm: 16px;  --icon: 20px;  --icon-tab: 24px;

  /* ── Depth: the warm paper shadow promoted from CardFrame. ── */
  --shadow-paper: 0 1px 2px rgb(60 45 30 / 0.05), 0 10px 28px -14px rgb(60 45 30 / 0.16);
  --shadow-lift:  0 18px 48px -16px rgb(60 45 30 / 0.28);   /* sheets and lightbox only */

  /* ── Motion ── */
  --motion-fast: 150ms;
  --motion-slow: 250ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

/*
 * Night paper: the same system at low light, 10pm–6am. It swaps the tokens, never the
 * components, so every component follows automatically. On the web, set data-paper="night"
 * on a root; on mobile, swap the same names in the NativeWind theme (DS-9).
 */
[data-paper="night"] {
  --paper:        oklch(0.205 0.012 70);
  --paper-card:   oklch(0.245 0.013 70);
  --paper-inset:  oklch(0.235 0.012 70);
  --ink:          oklch(0.92 0.02 82);
  --ink-80:       oklch(0.92 0.02 82 / 0.85);
  --ink-65:       oklch(0.92 0.02 82 / 0.66);   /* ≥ 5.5:1 on night card */
  --ink-50:       oklch(0.92 0.02 82 / 0.50);
  --ink-12:       oklch(0.92 0.02 82 / 0.14);
  --ink-08:       oklch(0.92 0.02 82 / 0.10);
  --pine:         oklch(0.74 0.07 165);         /* 8:1 on night */
  --pine-deep:    oklch(0.68 0.07 165);
  --pine-wash:    oklch(0.30 0.03 165);
  --pine-ink:     oklch(0.82 0.06 165);         /* 7.9:1 on night pine-wash */
  --on-pine:      oklch(0.205 0.012 70);        /* 8:1 on night pine */
  --focus:        oklch(0.80 0.125 78);
  --marigold-wash:oklch(0.32 0.04 85);
  --marigold-ink: oklch(0.88 0.09 85);
  --caution:      oklch(0.75 0.12 65);
  --caution-wash: oklch(0.30 0.035 65);
  --caution-ink:  oklch(0.85 0.08 75);          /* 8.6:1 on night caution-wash */
  --alert:        oklch(0.70 0.14 28);
  --alert-wash:   oklch(0.30 0.05 28);
  --alert-ink:    oklch(0.85 0.08 28);          /* 8.5:1 on night alert-wash */
  --scrim:        oklch(0.205 0.012 70 / 0.72);
  --shadow-paper: 0 0 #0000; /* not `none`: shadow lists must stay valid so rings survive */
  color-scheme: dark;
  /* Set the ground here too: inherited color resolves at the root, so the swap alone
     would leave un-styled text in day ink. */
  color: var(--ink);
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}