/* ── riptide design system ──────────────────────────────── * Progressive enhancement — all pages work without CSS * (CLI browsers, curl, etc). This file is the full design. * layout.html contains minimal inline fallback styles. * * Theme architecture (rev 1.6): * ┌─────────────────────────────────────────────────────────┐ * │ :root structural vars, no colors │ * │ [data-theme="dark"] the default palette │ * │ [data-theme="light"] light mode overrides │ * │ [data-accent="..."] flavor override for accent │ * └─────────────────────────────────────────────────────────┘ * * The theme is driven by `data-theme` on , which core.js * sets from localStorage (or prefers-color-scheme on first * visit). The default [data-theme="dark"] cascade under :root * remains in effect for no-JS / curl / CLI clients, so the * dark look stays untouched for those. Light mode applies * every surface/text/border token — semantic colors * (--green, --red, etc.) are re-pointed to slightly * desaturated variants for legibility on paper-white. * * **Adding a new accent flavor (e.g. "purple", "green", "teal")** * Drop a new block: * [data-accent="rose"] { --accent:#fb7185; --accent-hover:#fda4b4; --accent-dim:#4c0519; --border-focus:#fb7185; } * Then ship a picker that sets both `data-theme` and * `data-accent`. Nothing else in the file needs editing — * gradients, badges, focus rings all reference --accent / * --accent-hover / --accent-dim / --border-focus. * * Current flavors: blue (default), purple, green, teal, rose, amber. * Tag accent flavors with a friendly name & add the corresponding *