/* ============================================================================ FAHO — THEMES ---------------------------------------------------------------------------- THE single source of colour. Every colour the UI uses is a token defined here; every stylesheet references only `var(--token)` (deriving tints/glows from these via `color-mix()`), so it never hardcodes a colour. Two orthogonal axes drive the look: • MODE — `data-mode="dark" | "light"` (the light/dark accent). Sets the base surfaces, ink, semantic signals and atmosphere. No/unknown mode = light, so a page is never colourless — though in practice both attributes are always rendered by the server (see themes.py). • THEME — `data-theme=""`. The palette set is defined once by `PALETTES` in apps/accounts/themes.py; each id has a colour block below. A palette overrides only the SURFACES tint and the primary ACCENT on top of the mode base — so one theme renders differently depending on the mode. `olive` is the mode base itself, so it needs no override block; `khaki` is what an account with no stored preference gets (themes.py:DEFAULT_PALETTE). Both attributes live on (`:root`). A palette therefore needs a block per mode: `:root[data-theme=""][data-mode=""]`. Every selector is duplicated onto `.swatch[...]` so a preview tile in the theme picker resolves the very same tokens, scoped to itself — no separate preview palette to keep in sync. Adding a palette = copy the two override blocks below, retune the surfaces + accent, then add an (id, label) tuple to `PALETTES` in apps/accounts/themes.py. The picker on /settings/ renders its tile from that tuple and the JS is data-driven off the markup, so no template/JS change is needed. ========================================================================== */ /* ── THE TWO SPECK VARIANTS ──────────────────────────────────────────────── The paper texture (see base/tokens.css `--paper`) comes in exactly two flavours, because a speck is only visible against the surface it sits on: one that lightens a dark surface and one that darkens a light one. Which of the two a surface takes is a per-mode — and, for the khaki drab chrome, a per-surface — decision made further down by assigning to `--grain`; the encoded noise itself is stated here, once each. It has to be spelled out twice at all only because the two differ inside a `url("data:…")` string (a colour matrix that keeps white vs one that keeps black, and the strength on the ``), and no `var()` can reach inside one. But the DARK flavour was being picked by two separate blocks, each carrying its own copy of the same 400 characters — so a retune of the noise would have had to find both or let the drab sidebar drift away from dark mode. Hence a name. Declared on bare `:root` rather than in a mode block: neither the mode blocks nor the drab-chrome selector is an ancestor of the other, so a shared value has to sit above both. `.swatch` previews inherit it from `:root` like everything else. Alpha-only noise: feTurbulence, then a colour matrix that throws its colour away and keeps the channel as opacity — so the strength is the one number on the rect. ──────────────────────────────────────────────────────────────────────────── */ :root { --grain-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E"); --grain-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E"); } /* ── MODE BASE: dark (olive palette) ──────────────────────────────────────── */ :root[data-mode="dark"], .swatch[data-mode="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0c100d; --bg-2: #0f1411; --panel: #141a16; --panel-2: #1b2219; --panel-3: #222b21; --border: #2b342b; --border-bright: #3a463a; /* Ink */ --text: #e9efe7; --text-strong: #ffffff; /* max-contrast ink (hover states) */ --on-accent: #ffffff; /* ink over filled accent/danger surfaces */ --muted: #8f9d8c; --muted-2: #6b766a; /* Down-chevron for form fields — one shared arrow for native