/**
 * E-ink theme.
 *
 * Written for reflective displays: no backlight, a slow panel refresh that
 * smears animation, and — on most hardware — no colour at all. So it wants
 * maximum contrast, no motion, no shadow, and shape rather than hue to carry
 * meaning.
 *
 * It is also the framework's own test of whether the token contract is real.
 * A theme is supposed to be able to change *how everything looks* without
 * touching a single rule, and this is the hardest honest case: it changes
 * nearly everything. Anything it cannot express through tokens is a gap in the
 * token set, not a licence to write a rule here — see the notes at the bottom
 * for what that surfaced.
 *
 * E-ink is a *rendering mode*, not a palette: orthogonal to light/dark, so it
 * is not a `data-theme` value. Link it instead of (not alongside) another
 * theme, or let `@media (update: slow)` in `base/animation.css` pick up the
 * motion half automatically.
 */
@layer theme {
  :root {
    /* ── Contrast ──────────────────────────────────────────────────────────
       Pure black on pure white. A reflective panel has no backlight to lift a
       near-black, so the near-blacks that read as "soft" on an LCD read as
       muddy here. */
    --backgroundH: 0;
    --backgroundS: 0%;
    --backgroundL: 100%;

    --bodyH: 0;
    --bodyS: 0%;
    --bodyL: 0%;

    /* Secondary text still has to be legible, not merely lighter. 40% is
       about the floor for 8-bit greyscale at typical panel gamma. */
    --secondaryH: 0;
    --secondaryS: 0%;
    --secondaryL: 40%;

    /* ── Greyscale ─────────────────────────────────────────────────────────
       Zeroing saturation on the primitives collapses the whole brand ramp to
       grey without restating a single composed colour — which is exactly what
       the H/S/L primitive model exists for. */
    --primaryS: 0%;
    --primaryL: 0%;

    --blueS: 0%;
    --greenS: 0%;
    --yellowS: 0%;
    --orangeS: 0%;
    --redS: 0%;
    --purpleS: 0%;
    --pinkS: 0%;
    --grayS: 0%;

    /* ── Semantic states ───────────────────────────────────────────────────
       With hue gone, `--error` and `--success` would render as the same grey.
       Lightness is the only channel left, so spread them across it: an error
       is the darkest thing on the page, success the lightest that still
       reads. This is a workaround, not a fix — see note 3 below. */
    --errorS: 0%;
    --errorL: 0%;

    --warningS: 0%;
    --warningL: 25%;

    --infoS: 0%;
    --infoL: 40%;

    --successS: 0%;
    --successL: 30%;

    /* ── Borders ───────────────────────────────────────────────────────────
       Hairlines disappear on a panel that quantises hard. Full-strength black
       and a thicker line; `--border-width` was added for this theme. */
    --borderH: 0;
    --borderS: 0%;
    --borderL: 0%;
    --border-width: 2px;

    /* Flat white behind the cards too. A recessed grey ground is a depth cue
       that needs a backlight to read; on a reflective panel it just dithers,
       and the border above already says where the card ends. */
    --surface-recessedL: 100%;

    /* ── Depth ─────────────────────────────────────────────────────────────
       Shadows are a backlight idiom. On e-ink they are dither noise, so
       borders carry elevation instead. */
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --backdrop-color: hsl(0 0% 0% / 0.15);
    --drawer-shadow-color: transparent;

    /* ── Motion ────────────────────────────────────────────────────────────
       A panel refresh takes 100–800 ms and ghosts. Anything that animates is
       either invisible or a smear. */
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;

    /* ── Type ──────────────────────────────────────────────────────────────
       Reflective panels are typically 150–300 ppi with heavy gamma, so
       hairline strokes fill in. Nudge the body weight up and open the leading
       — both are already tokens. */
    --fw-normal: 500;
    --fw-medium: 600;
    --lh-base: 1.6;
  }
}
/*
 * ── What this theme could not express ─────────────────────────────────────
 *
 * Everything above is a token, which was the point — this file contains no
 * rules. Five things were *not* tokens when it was written, and each was added
 * to the framework rather than worked around here:
 *
 * 1. `--border-width`. `1px solid currentColor` was hardcoded in 19 places
 *    across `base/` and `_components.css`, so no theme could thicken a line.
 *
 * 2. `--backdrop-color`. The modal wash was a literal `rgba(0, 0, 0, 0.5)`
 *    split across a colour and an `opacity`, so a theme could reach neither
 *    the hue nor the weight. On a reflective panel a half-black overlay hides
 *    the page rather than dimming it.
 *
 * 3. `--focus-ring-color` / `--focus-ring-width`. The ring was
 *    `box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1)` — a hardcoded *blue*,
 *    unreachable by any theme and invisible in greyscale.
 *
 * 4. `--drawer-shadow-color`. Drawers cast sideways, so they never used the
 *    `--shadow-*` scale and kept their shadow even when every shadow token
 *    was set to `none`.
 *
 * 5. `--primary-contrast`. Text on a filled primary surface was `#fff`, which
 *    is wrong for any light-primary theme and unreachable from one.
 *
 * It also surfaced one defect that was *not* a missing token. With hue
 * removed, `--error` and `--success` rendered as the same grey, because state
 * was carried by colour alone — a WCAG 1.4.1 failure on any display, not just
 * this one. Fixed in the components: `ui-alert[variant]` and
 * `p[data-status][data-error]` now pair colour with a glyph, drawn as a
 * pseudo-element so no markup changed. The lightness spread above is kept as
 * reinforcement, not as the only signal.
 */