/*
 * theme.css — the design-token system. THE single place palette, shape,
 * shadow, and base type size live. Templates and components.css consume
 * these vars (Tailwind utilities reference them via arbitrary values like
 * `text-[var(--color-text)]` and the mapped `bg-primary` names in
 * layouts/app.html). Swapping the palette is intended to be a one-file
 * change here — the one known exception is trends.js, which hard-codes its
 * chart colors on purpose (see docs/design/TRENDS.md: chart color carries
 * meaning and is settled; do not "fix" that drift from here).
 *
 * Light theme only. Dark mode is Phase 2+ — do not add dark tokens yet.
 * Contrast is a GATE (ADR 0007 G2): body-text pairings here clear WCAG AA
 * 4.5:1 on both --color-bg and --color-surface. If you tune a color, re-check
 * the pairs named below before shipping.
 */
:root {
    /* Palette 1: Twilight Calm (default — will be swapped after owner selects).
       --color-text on surface ≈ 13.4:1, --color-text-muted on surface ≈ 7.9:1,
       --color-primary on surface ≈ 8.0:1 (also fine reversed: white on primary).
       --color-accent is DECORATIVE ONLY (meter fills, glyphs) — at ~2.6:1 it
       must never carry text. */
    --color-primary: #3D4F7C;
    --color-secondary: #7C9A82;
    --color-accent: #D4915C;
    --color-bg: #F0F2F5;
    --color-surface: #FFFFFF;
    --color-text: #2D2D2D;
    --color-text-muted: #525252;
    --color-border: #E0E0E0;

    /* Sleepiness scale semantic colors (1 = not sleepy … 4 = very sleepy).
       Saturated; used for small badges/dots and the rating buttons. Anything
       WRITTEN on top of these fills must use --color-scale-ink (below) —
       --color-text misses AA on the level-4 red, and white misses on 1–3. */
    --color-sleepiness-1: #4CAF50;
    --color-sleepiness-2: #FFC107;
    --color-sleepiness-3: #FF9800;
    --color-sleepiness-4: #F44336;

    /* Ink for digits/glyphs rendered ON the saturated scale fills above.
       Near-black (not --color-text): #141414 clears 4.5:1 small-text AA on
       all four fills (worst case: 5.0:1 on the level-4 red; --color-text
       manages only 3.7:1 there). Shared by .sleepiness-num and
       .sleepiness-dot so the two digit styles can't drift apart. */
    --color-scale-ink: #141414;

    /* Muted calendar fills — same 1–4 scale, softened so a dense month grid
       reads calm rather than alarming (the saturated tokens above stay for
       single dots/badges). Used only by the Journal calendar cells. This
       softening is the precedent for "calm within the AA gate" (ADR 0007):
       the band text on these fills still clears 6:1. Do not re-saturate. */
    --color-cal-sleepiness-1: #A9CDA6;
    --color-cal-sleepiness-2: #F0D98C;
    --color-cal-sleepiness-3: #EDB07C;
    --color-cal-sleepiness-4: #E39A8F;

    /* Status semantics (form errors, etc.) */
    --color-error: #C0392B;
    --color-error-bg: color-mix(in srgb, #C0392B 10%, transparent);

    /* Shape & elevation. Radii step sm→lg with element size (inputs/chips →
       sm, buttons/inner cards → md, page-level cards → lg). Shadows stay
       soft on purpose — depth cues without hard edges (spec §11: subtle
       shadows so interactive elements read as tappable). */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);

    /* Typography. 17px base — deliberately above the web's default 16px
       because the audience is tired (spec §11: 16–18px floor is a gate). */
    --font-size-base: 17px;

    /* Spacing scale (approved 2026-07-03 — ADR 0009). Numbered to MATCH
       Tailwind's spacing steps, so "6" means 1.5rem whether it's `mb-6` in
       a template or var(--space-6) in components.css — one rhythm, two
       syntaxes. Both layouts' Tailwind configs point steps 1–10 at these
       tokens, so retuning a value here moves template utilities AND
       component CSS together.
       Values are REM on purpose: rem spacing scales with the user's browser
       font-size preference; px spacing would stay frozen while text grows
       (G2 concern). Dot-steps use a dash: Tailwind `1.5` ↔ --space-1-5.
       Deliberately NOT tokenized (see components.css house rules):
       micro-optical values <0.25rem (icon kerning, badge padding), the
       calendar day-grid's 3–6px metrics, fixed chrome offsets (bottom-nav
       clearance, sidebar width), and section-register spacing ≥3rem
       (py-12+), which is page architecture, not component rhythm. */
    --space-1: 0.25rem;    /*  4px */
    --space-1-5: 0.375rem; /*  6px */
    --space-2: 0.5rem;     /*  8px */
    --space-2-5: 0.625rem; /* 10px */
    --space-3: 0.75rem;    /* 12px */
    --space-3-5: 0.875rem; /* 14px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
}