/* ============================================================================ DAILY MENU v2 — SKIN TOKENS (the color layer) Companion to ./tokens.css (structural tokens) and docs/DESIGN.md §1/§9.4 ("SKIN token contract"). A **skin** is a named palette — surfaces, ink tiers, the person A/B "two light sources" hues + their derived tints/rails, the now-ember/semantic accents, and elevation-shadow tint — selected with `[data-skin=""]` on , composed WITH the existing dark/light `[data-theme]` attribute (skin picks the palette, theme picks the variant). No JS color math anywhere: every value below is a literal, hand-tuned custom property. Component CSS must never hardcode a color — reference one of the tokens documented here. ---------------------------------------------------------------------------- THE CONTRACT — every skin block below (and any new one) must define ALL of: Surfaces (elevation ramp, warm-neutral): --bg --frame --surface --row-empty --row --chip --sheet --overlay Ink (text tiers, never pure black/white): --ink --ink-dim --ink-faint --ink-ghost --line --line-strong The "now" ember (belongs to neither person; DESIGN §0/§2): --now --now-glow --now-wash Semantic accents: --over --due --ok --busy-hatch Person A / person B — the "two light sources" (DESIGN §1.2). Each is a hue trio (core / tint / tint-hi / glow) plus an ink-on-tint: --pA --pA-tint --pA-tint-hi --pA-glow --pA-ink --pB --pB-tint --pB-tint-hi --pB-glow --pB-ink Elevation shadows (color-tinted, so they belong here not in tokens.css): --elev-sheet --elev-ghost Each skin defines the block twice: once under `[data-skin=""]` (dark — the default variant, always present and self-sufficient) and once under `[data-skin=""][data-theme="light"]` (the light variant, layered on top of the household's existing light-theme switch). A skin is incomplete without both variants. HOW TO ADD A 4TH SKIN 1. Pick a name (lowercase, e.g. "forest"). 2. Copy one `[data-skin="..."]` block + its `[data-theme="light"]` pair, rename the attribute selector, and redesign every token above — keeping person A vs B distinguishable by hue *and* lightness (not color alone, DESIGN §1.2/§8), keeping done-state legible (chip.done drops to --p-tint and dims the label to --ink-dim — verify that still reads), and keeping the now-ember visibly warm/amber-family so "act now" keeps its cross-skin meaning. 3. Register the name in the server-side skin registry (src/DailyMenu/Domain/Skins.cs) so it validates + persists — this is the ONLY non-CSS change required. 4. Add the name to the settings page's skin