/* ============================================================ SH3PHERD · Design tokens — TIER 2: SEMANTIC ------------------------------------------------------------ Role-based tokens. This is the surface components consume. Each token names a ROLE (page background, header, warning…) and points at a TIER-1 primitive. Re-theming = re-pointing here, never editing a hex. UMBRA (the dark theme) is the base: it lives on :root, so an app with no theme attribute renders umbra. Every other theme is an explicit override applied by setting `data-theme=""` on (or any ancestor — a subtree themes independently). The status families (primary/info/warning/alert) each expose a tinted-chip triad on top of the solid base: solid fill -text the readable tint for text/icon on the surface -surface the faint tinted background -border the surface's border Surface/border are derived with color-mix on a primitive so the palette stays pure solids — no rgba primitives. Keep this list in lock-step with tokens.catalog.ts — the contract test fails if they drift. ============================================================ */ /* ── Base theme: UMBRA (dark) ─────────────────────────────── */ :root { /* Page scaffold rhythm — FLUID defaults, read by `fold-page-layout` via `var()`. A page/theme overrides on any ancestor (or the element) to retune; the playground sets them inline. The gutter scales more than the gap: horizontal room is precious on small screens, vertical rhythm less so — so the two carry deliberately different responsive curves. */ --fold-page-gutter: clamp(1rem, 4vw, 2rem); /* 16 → 32px (fluid 400–800px) */ --fold-page-gap: clamp( 1.25rem, 3vw, 2rem ); /* 20 → 32px (fluid ~665–1065px) */ /* One notch tighter than the page gap — the vertical rhythm *inside* a content panel (`fold-tab-panel`), where stacked sections read as one screen rather than distinct page bands. Stays fluidly below `--fold-page-gap` at every width (16 → 24px vs 20 → 32px). Override to retune a panel's inner rhythm. */ --fold-panel-gap: clamp(1rem, 2.4vw, 1.5rem); /* 16 → 24px */ /* Scrollbar — the house scrollbar for the shell content scroll box and every `[foldScrollRegion]`. Not a `--fold-color-*` role (it's a component knob, like the page-scaffold vars above), so it's out of the colour catalogue. The thumb derives from the surface's own text via `currentColor`-style mix, so it adapts per theme AND per surface with no per-theme entry. */ --fold-scrollbar-size: 10px; --fold-scrollbar-radius: var(--fold-radius-pill); --fold-scrollbar-thumb: color-mix( in srgb, var(--fold-color-text) 24%, transparent ); --fold-scrollbar-track: transparent; /* Surfaces (bg- = a fill role, darkest chrome → lightest page) */ --fold-color-bg-page: var(--fold-ref-ink-850); /* page background */ --fold-color-bg-header: var(--fold-ref-ink-950); /* top header bar */ --fold-color-bg-rail-primary: var( --fold-ref-ink-925 ); /* rail 1 — app menu */ --fold-color-bg-rail-secondary: var( --fold-ref-ink-900 ); /* rail 2 — workspace menu */ --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-white) 3%, transparent ); /* rail 3 — faint overlay */ /* Primary / accent */ --fold-color-brand: var(--fold-ref-teal-500); --fold-color-on-brand: var(--fold-ref-white); --fold-color-primary: var(--fold-ref-teal-500); --fold-color-primary-strong: var(--fold-ref-teal-400); /* hover/active */ --fold-color-on-primary: var( --fold-ref-white ); /* text/icon on a solid primary fill */ --fold-color-primary-text: var(--fold-ref-teal-400); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-teal-500) 14%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-teal-500) 35%, transparent ); /* Info (purple) */ --fold-color-info: var(--fold-ref-purple-500); --fold-color-on-info: var(--fold-ref-white); --fold-color-info-text: var(--fold-ref-purple-300); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-purple-400) 12%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-purple-400) 30%, transparent ); /* Warning (amber) */ --fold-color-warning: var(--fold-ref-amber-500); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-300); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-500) 14%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-300) 30%, transparent ); /* Alert (red) */ --fold-color-alert: var(--fold-ref-red-500); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: var(--fold-ref-red-400); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-500) 12%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-400) 35%, transparent ); /* Success (green) */ --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-300); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 14%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-300) 30%, transparent ); /* Text */ --fold-color-text: var(--fold-ref-slate-50); --fold-color-text-secondary: var(--fold-ref-slate-400); --fold-color-text-muted: var(--fold-ref-slate-500); --fold-color-text-faded: var(--fold-ref-slate-700); /* Card — a solid raised content surface (opaque, unlike the alpha overlays) */ --fold-color-surface-card: var(--fold-ref-ink-800); /* Sunken — a deeper solid surface for large content containers (data tables, page-level cards). Sits below `surface-card`: darker than the card, lighter than the page. */ --fold-color-surface-sunken: color-mix( in srgb, var(--fold-ref-ink-800) 35%, var(--fold-ref-ink-850) ); /* Neutral surfaces + border — alpha overlays (white on dark) */ --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-white) 3%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-white) 5%, transparent ); --fold-color-surface-hover: var(--fold-ref-ink-700); /* solid raised hover */ /* One step AWAY from its container, in whichever direction the theme's polarity dictates. A header or footer band has to detach from the body of its card: on a dark theme it lightens, on a light theme it darkens. The component names the role and never has to know which way that is. */ --fold-color-surface-band: var(--fold-ref-ink-700); --fold-color-border: color-mix( in srgb, var(--fold-ref-white) 8%, transparent ); /* Fainter hairline — row dividers, subtle panel edges (below `border`). */ --fold-color-border-subtle: color-mix( in srgb, var(--fold-ref-white) 4%, transparent ); /* Glass — translucent frosted overlay (panels, floating menus) */ --fold-color-glass: color-mix( in srgb, var(--fold-ref-ink-950) 55%, transparent ); --fold-color-glass-border: color-mix( in srgb, var(--fold-ref-white) 13%, transparent ); /* Scrim — a darkening veil behind the mobile nav drawer. */ --fold-color-scrim: color-mix( in srgb, var(--fold-ref-black) 55%, transparent ); } /* ── Named surfaces ─────────────────────────────────────────── A `[data-surface]` (stamped by the `[foldSurface]` directive) resolves its own text, so a theme that re-declares `--fold-color-text` for one surface actually lands there — a custom-property override reaches only what is resolved inside the subtree, never a colour already inherited from an ancestor. Inert under a uniform theme; the seam a mixed theme (navi) overrides across. */ [data-surface] { color: var(--fold-color-text); } /* ── Accent surface — an auto-inverting region ──────────────────────────────── `[data-surface="accent"]` (stamped by fold-card's `surface="accent"`, or the `foldSurface` directive) fills with the brand accent and re-points its whole content sub-tree to an on-accent palette — text, borders, band gradation and even nested buttons / links / icon-tiles read on the accent, with no per-component code. The move that makes this both theme-agnostic AND able to *swap* the brand pair (`primary` ↔ `on-primary`, needed for a solid button or a filled icon tile) without a CSS custom-property cycle: the accent + its ink are CAPTURED on the surface element (where the tokens still hold their normal values), then the inverted role-set is applied to DESCENDANTS from those captures — so a role can reference the pre-inversion value it is replacing. Every value is a `color-mix` of the captured pair, so it holds on every theme, and the surface and band steps stay a lighter shade of the accent (gradation kept in-hue). A theme that needs to diverge overrides any role by nesting a rule for its own `[data-theme=…]` under `[data-surface="accent"]` — the same seam as chrome. */ [data-surface="accent"] { color: var(--fold-color-on-primary); --_accent-ink: var(--fold-color-on-primary); --_accent-fill: var(--fold-color-primary); } [data-surface="accent"] * { /* text ramp → the light ink. COMPRESSED vs a normal surface: an accent ground has little contrast headroom (a mid-bright accent caps white text near 3:1), so the accent card is an emphasis surface — its text clears AA-large (3:1), asserted by accent-contrast.spec.ts, and secondary/muted keep more ink than they would on the page. A light accent that still reads thin overrides the ramp per theme (surfaces.md). */ --fold-color-text: var(--_accent-ink); --fold-color-text-secondary: color-mix( in srgb, var(--_accent-ink) 96%, transparent ); --fold-color-text-muted: color-mix( in srgb, var(--_accent-ink) 74%, transparent ); --fold-color-text-faded: color-mix( in srgb, var(--_accent-ink) 58%, transparent ); /* borders + separators → thin ink lines */ --fold-color-border: color-mix(in srgb, var(--_accent-ink) 24%, transparent); --fold-color-border-subtle: color-mix( in srgb, var(--_accent-ink) 15%, transparent ); /* nested surfaces + raised tiles/bands → a lighter step of the ACCENT itself */ --fold-color-surface-card: color-mix( in srgb, var(--_accent-ink) 12%, var(--_accent-fill) ); --fold-color-surface-raised: color-mix( in srgb, var(--_accent-ink) 16%, var(--_accent-fill) ); --fold-color-surface-hover: color-mix( in srgb, var(--_accent-ink) 18%, var(--_accent-fill) ); --fold-color-surface-sunken: color-mix( in srgb, var(--_accent-ink) 8%, var(--_accent-fill) ); /* the brand pair, SWAPPED from the captures (no cycle): the fill becomes the light ink (link text, glass button, chip ground) and its on-colour becomes the accent — so a filled icon tile or solid button reads accent-on-light. */ --fold-color-primary: var(--_accent-ink); --fold-color-on-primary: var(--_accent-fill); --fold-color-primary-text: var(--_accent-ink); --fold-color-primary-strong: var(--_accent-ink); --fold-color-primary-surface: color-mix( in srgb, var(--_accent-ink) 16%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--_accent-ink) 32%, transparent ); } /* ── Elevated surfaces ──────────────────────────────────────── A `[data-elevated]` (stamped by the `[foldElevated]` directive) is a raised card: radius + shadow, riding on the element's own background so its colour stays its own. It does NOT inset itself — elevation ≠ inset. The gutter around a floating region is the *container's* job (padding on the slot), never a child margin, so a `height: 100%` region fits with no overflow. Radius/shadow are tokenised, so a scope can dial the elevation without a prop. */ [data-elevated] { border-radius: var(--fold-surface-radius, var(--fold-radius-lg)); box-shadow: var(--fold-surface-shadow, var(--fold-shadow-md)); } /* ── Frozen scroll region ───────────────────────────────────── Toggled by the ScrollRegionRegistry to freeze a scroll region (the shell's content box, a `[foldScrollRegion]`) while a modal overlay is open — the scroll owner in a shell is an inner box, not `body`, so a body scroll-lock alone leaves the page scrolling behind the modal. A class with `!important`, not an inline write, so it never clobbers the region's own overflow (inline binding or stylesheet), which returns the instant the class is removed. */ .fold-scroll-frozen { overflow: hidden !important; } /* ── House scrollbar (WebKit / Blink) ───────────────────────── The tokenised scrollbar for the shell's content scroll box (`.fold-shell-scroll`) and every `[foldScrollRegion]` (`.fold-scroll-region`). Firefox / the standard `scrollbar-width` + `scrollbar-color` are set inline by the directive / shell (they take custom-property values); this `::-webkit-scrollbar` layer — which can't be an inline style — adds the thumb radius on Blink/WebKit. The colour tokens derive from the surface's own text, so the thumb adapts per theme AND per surface (chrome rail vs page). `@supports selector()` gates it so only engines that actually style the pseudo pay for it. */ @supports selector(::-webkit-scrollbar) { .fold-shell-scroll::-webkit-scrollbar, .fold-scroll-region::-webkit-scrollbar { width: var(--fold-scrollbar-size, 10px); height: var(--fold-scrollbar-size, 10px); } .fold-shell-scroll::-webkit-scrollbar-track, .fold-scroll-region::-webkit-scrollbar-track { background: var(--fold-scrollbar-track, transparent); } .fold-shell-scroll::-webkit-scrollbar-thumb, .fold-scroll-region::-webkit-scrollbar-thumb { background: var( --fold-scrollbar-thumb, color-mix(in srgb, currentColor 24%, transparent) ); border-radius: var(--fold-scrollbar-radius, var(--fold-radius-pill)); /* A transparent inset so the thumb reads as a slim pill, not a full-width bar. */ border: 2px solid transparent; background-clip: padding-box; } } /* ── Override theme: LUMEN (light) ────────────────────────── */ [data-theme="lumen"] { /* Surfaces */ --fold-color-bg-page: var(--fold-ref-cloud-100); --fold-color-bg-header: var(--fold-ref-white); --fold-color-bg-rail-primary: var(--fold-ref-cloud-150); --fold-color-bg-rail-secondary: var(--fold-ref-cloud-50); --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-black) 2%, transparent ); /* Primary / accent — brand mutes on light, hover darkens further */ --fold-color-brand: var(--fold-ref-teal-550); --fold-color-on-brand: var(--fold-ref-white); --fold-color-primary: var(--fold-ref-teal-550); --fold-color-primary-strong: var(--fold-ref-teal-600); --fold-color-on-primary: var(--fold-ref-white); --fold-color-primary-text: var(--fold-ref-teal-500); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-teal-500) 8%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-teal-500) 25%, transparent ); /* Info (purple) */ --fold-color-info: var(--fold-ref-purple-600); --fold-color-on-info: var(--fold-ref-white); --fold-color-info-text: var(--fold-ref-purple-500); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-purple-600) 8%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-purple-600) 22%, transparent ); /* Warning (amber) */ --fold-color-warning: var(--fold-ref-amber-600); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-550); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-600) 8%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-600) 22%, transparent ); /* Alert (red) */ --fold-color-alert: var(--fold-ref-red-600); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: var(--fold-ref-red-450); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-600) 8%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-600) 22%, transparent ); /* Success (green) — base holds across themes; tint + surfaces soften on light */ --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-550); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 10%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-500) 25%, transparent ); /* Text */ --fold-color-text: var(--fold-ref-slate-900); --fold-color-text-secondary: var(--fold-ref-slate-600); --fold-color-text-muted: var(--fold-ref-slate-550); --fold-color-text-faded: var(--fold-ref-slate-350); /* Card — a solid raised content surface (white on light) */ --fold-color-surface-card: var(--fold-ref-white); /* Sunken — light theme flattens the depth cue to white, matching the ref. */ --fold-color-surface-sunken: var(--fold-ref-white); /* Neutral surfaces + border — alpha overlays (black on light) */ --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-black) 2%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-black) 4%, transparent ); --fold-color-surface-hover: var( --fold-ref-cloud-150 ); /* solid raised hover */ --fold-color-surface-band: var(--fold-ref-cloud-150); --fold-color-border: color-mix( in srgb, var(--fold-ref-black) 8%, transparent ); /* Fainter hairline — row dividers, subtle panel edges (below `border`). */ --fold-color-border-subtle: color-mix( in srgb, var(--fold-ref-black) 4%, transparent ); /* Glass — translucent frosted overlay (panels, floating menus) */ --fold-color-glass: color-mix( in srgb, var(--fold-ref-white) 65%, transparent ); --fold-color-glass-border: color-mix( in srgb, var(--fold-ref-black) 12%, transparent ); /* Scrim — a darkening veil behind the mobile nav drawer. */ --fold-color-scrim: color-mix( in srgb, var(--fold-ref-black) 45%, transparent ); } /* ── Extra theme: BUBBLY ─────────────────────────────────────── Festive light: the LUMEN block re-pointed onto soft lavender chrome (bubble) with a joyful violet brand (grape), rounded off in scales.css. White cards float on the lavender page — the theme's name is the look. Info moves to azure (cyan) so it never blurs into the violet brand; the other status families stay put. */ [data-theme="bubbly"] { /* Surfaces */ --fold-color-bg-page: var(--fold-ref-bubble-100); --fold-color-bg-header: var(--fold-ref-bubble-0); --fold-color-bg-rail-primary: var(--fold-ref-bubble-150); --fold-color-bg-rail-secondary: var(--fold-ref-bubble-50); --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-grape-500) 5%, transparent ); /* Primary / accent — the violet brand, festive and saturated */ --fold-color-brand: var(--fold-ref-grape-500); --fold-color-on-brand: var(--fold-ref-bubble-0); --fold-color-primary: var(--fold-ref-grape-500); --fold-color-primary-strong: var(--fold-ref-grape-600); --fold-color-on-primary: var(--fold-ref-bubble-0); --fold-color-primary-text: var(--fold-ref-grape-700); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-grape-500) 12%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-grape-500) 30%, transparent ); /* Info — moved to azure (cyan), away from the violet brand */ --fold-color-info: var(--fold-ref-azure-500); /* bubbly is the one theme whose `info` is not purple but azure — a much lighter fill. White on it measures 2.8:1; the dark ink gives 5.7:1. */ --fold-color-on-info: var(--fold-ref-graphite-950); --fold-color-info-text: var(--fold-ref-azure-500); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-azure-500) 12%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-azure-500) 30%, transparent ); /* Warning (amber) */ --fold-color-warning: var(--fold-ref-amber-600); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-550); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-600) 10%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-600) 24%, transparent ); /* Alert (red) */ --fold-color-alert: var(--fold-ref-red-600); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: var(--fold-ref-red-450); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-600) 10%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-600) 24%, transparent ); /* Success (green) */ --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-550); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 12%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-500) 28%, transparent ); /* Text — reuses slate, like light */ --fold-color-text: var(--fold-ref-slate-900); --fold-color-text-secondary: var(--fold-ref-slate-600); --fold-color-text-muted: var(--fold-ref-slate-550); --fold-color-text-faded: var(--fold-ref-slate-350); /* Card — white, so it floats above the lavender page */ --fold-color-surface-card: var(--fold-ref-bubble-0); --fold-color-surface-sunken: var(--fold-ref-bubble-50); /* Neutral surfaces + border — the brand tints the overlays a hair */ --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-grape-500) 3%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-grape-500) 6%, transparent ); --fold-color-surface-hover: var( --fold-ref-bubble-150 ); /* solid raised hover */ --fold-color-surface-band: var(--fold-ref-bubble-150); --fold-color-border: color-mix( in srgb, var(--fold-ref-grape-500) 14%, transparent ); /* Fainter hairline — row dividers, subtle panel edges (below `border`). */ --fold-color-border-subtle: color-mix( in srgb, var(--fold-ref-grape-500) 8%, transparent ); /* Glass — translucent frosted overlay (panels, floating menus) */ --fold-color-glass: color-mix( in srgb, var(--fold-ref-bubble-0) 68%, transparent ); --fold-color-glass-border: color-mix( in srgb, var(--fold-ref-grape-500) 16%, transparent ); /* Scrim — a darkening veil behind the mobile nav drawer. */ --fold-color-scrim: color-mix( in srgb, var(--fold-ref-black) 50%, transparent ); } /* ── Extra theme: NAVI ──────────────────────────────────────── Dark chrome, light content — the classic "app rail beside a white page". It is the LUMEN block with three surfaces moved to ink, plus one scoped override: the shell's chrome regions take the UMBRA text/border/surface roles back, because a dark rail needs light text on it. That second block is the honest part. The palette has no "on-chrome" text role — text/border/surface are single roles shared by page and chrome — so a mixed theme cannot be expressed by re-pointing alone. It re-declares those roles on the `[data-surface="chrome"]` regions instead: variables only, no component change, and addressed by a contract the shell opts into rather than by its class names. Give the catalogue real `*-on-chrome` roles the day mixed chrome stops being a demo. */ [data-theme="navi"] { /* Surfaces — dark chrome over a light page, three real steps of depth. */ --fold-color-bg-page: var(--fold-ref-paper-100); --fold-color-bg-header: var(--fold-ref-graphite-950); --fold-color-bg-rail-primary: var(--fold-ref-graphite-900); --fold-color-bg-rail-secondary: var(--fold-ref-graphite-850); --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-paper-300) 30%, transparent ); /* Brand — page polarity. The chrome sub-block below flips it. */ --fold-color-brand: var(--fold-ref-signal-600); --fold-color-on-brand: var(--fold-ref-paper-0); --fold-color-primary: var(--fold-ref-signal-600); --fold-color-primary-strong: var(--fold-ref-signal-700); --fold-color-on-primary: var(--fold-ref-paper-0); --fold-color-primary-text: var(--fold-ref-signal-700); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-signal-600) 8%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-signal-600) 26%, transparent ); /* Info (purple) */ --fold-color-info: var(--fold-ref-purple-600); --fold-color-on-info: var(--fold-ref-white); --fold-color-info-text: var(--fold-ref-purple-600); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-purple-600) 8%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-purple-600) 22%, transparent ); /* Warning (amber) — the `-text` steps of the light themes do NOT survive on paper (2.4 to 3.9:1); each takes a darker tint of its own hue. */ --fold-color-warning: var(--fold-ref-amber-600); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-700); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-600) 8%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-600) 22%, transparent ); /* Alert (red) */ --fold-color-alert: var(--fold-ref-red-600); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: var(--fold-ref-red-600); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-600) 8%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-600) 22%, transparent ); /* Success (green) */ --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-700); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 10%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-500) 25%, transparent ); /* Text — one step down from the light themes' ramp: on paper, `faded` borrowed from lumen measured 2.3:1. */ --fold-color-text: var(--fold-ref-slate-900); --fold-color-text-secondary: var(--fold-ref-slate-650); --fold-color-text-muted: var(--fold-ref-slate-600); --fold-color-text-faded: var(--fold-ref-slate-450); /* Depth — card, sunken and page are three distinct values. They used to be white, white and ivory: a table nested in a card had no edge at all. */ --fold-color-surface-card: var(--fold-ref-paper-0); --fold-color-surface-sunken: var(--fold-ref-paper-50); /* 22% of an already-pale grey, laid on a near-white body, composited to 1.07:1 — a zebra stripe nobody could see. There is no room to be subtle on a light ground; see the depth contract. */ --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-paper-300) 45%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-paper-300) 34%, transparent ); --fold-color-surface-hover: var(--fold-ref-paper-100); --fold-color-surface-band: var(--fold-ref-paper-200); /* Borders — SOLID. A back-office reads as machined seams, not soft alphas. One step darker than navi 2 shipped: on a light ground the depth comes from the CONTOUR and the shadow, not from the fill. There is no room in the fill — between white and a light page there is under 10% of luminance to spread across three levels — so a `sunken` card sat at 1.05:1 against the page and its border at 1.11:1 did not rescue it. `surface-sunken` is unchanged: it is the outline that holds a card, which is what "machined seam" claimed and these values did not honour. */ --fold-color-border: var(--fold-ref-paper-300); --fold-color-border-subtle: var(--fold-ref-paper-200); --fold-color-glass: color-mix( in srgb, var(--fold-ref-paper-0) 72%, transparent ); --fold-color-glass-border: var(--fold-ref-paper-200); --fold-color-scrim: color-mix( in srgb, var(--fold-ref-graphite-950) 55%, transparent ); } /* navi is mixed — light page, dark chrome — so the chrome surfaces need their own text, surfaces and brand. Addressed by contract (`[data-surface="chrome"]`, which the shell stamps on its rails + header), never by the shell's class names: a renamed rail must not be able to break a theme. */ [data-theme="navi"] [data-surface="chrome"] { /* The chrome is a second polarity, not a tweak. Everything that meets the dark ground is redeclared — the closure test enforces that a family cannot travel half-way. Seventeen roles used to live here; the twenty-eight that did not are where every contrast failure was. Text — four steps. The first three clear 4.5:1 everywhere; `faded` holds 4.1:1 on a hovered row, which is a placeholder/disabled role at the 3:1 UI floor. */ --fold-color-text: var(--fold-ref-navyink-50); --fold-color-text-secondary: var(--fold-ref-navyink-200); --fold-color-text-muted: var(--fold-ref-navyink-300); --fold-color-text-faded: var(--fold-ref-navyink-400); /* Brand — chrome polarity. `primary-text` is a step LIGHTER than `primary` (mirroring 600 → 700 on the page): the same hue laid on its own tinted surface gave only 4.2:1, and a 10px counter cannot afford that. */ --fold-color-primary: var(--fold-ref-signal-300); --fold-color-primary-strong: var(--fold-ref-signal-200); --fold-color-on-primary: var(--fold-ref-graphite-950); --fold-color-primary-text: var(--fold-ref-signal-200); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-signal-300) 16%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-signal-300) 32%, transparent ); /* Statuses — the DARK-ground tints, not the page's. Same bases, same inks: a status fill does not change polarity, only the text around it does. */ --fold-color-info: var(--fold-ref-purple-500); --fold-color-on-info: var(--fold-ref-white); --fold-color-info-text: var(--fold-ref-purple-300); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-purple-400) 14%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-purple-400) 32%, transparent ); --fold-color-warning: var(--fold-ref-amber-500); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-300); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-500) 16%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-300) 32%, transparent ); --fold-color-alert: var(--fold-ref-red-500); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: color-mix( in srgb, var(--fold-ref-red-400) 72%, var(--fold-ref-navyink-50) ); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-500) 16%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-400) 36%, transparent ); --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-300); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 16%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-300) 32%, transparent ); /* Surfaces + borders of the chrome. */ --fold-color-surface-card: var(--fold-ref-graphite-800); --fold-color-surface-sunken: var(--fold-ref-graphite-950); --fold-color-surface-hover: var(--fold-ref-graphite-800); --fold-color-surface-band: var(--fold-ref-graphite-700); --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-navyink-50) 4%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-navyink-50) 7%, transparent ); --fold-color-border: color-mix( in srgb, var(--fold-ref-navyink-50) 10%, transparent ); --fold-color-border-subtle: color-mix( in srgb, var(--fold-ref-navyink-50) 5%, transparent ); /* Glass — the collapsed-rail tooltip. It inherited the page's white frost onto the dark chrome and rendered 1.9:1: light text on a light veil. */ --fold-color-glass: color-mix( in srgb, var(--fold-ref-graphite-950) 78%, transparent ); --fold-color-glass-border: color-mix( in srgb, var(--fold-ref-navyink-50) 14%, transparent ); --fold-color-scrim: color-mix( in srgb, var(--fold-ref-graphite-950) 62%, transparent ); /* Grounds — a rail nested inside the chrome stays in the chrome's family instead of punching a hole of page colour through it. */ --fold-color-bg-page: var(--fold-ref-graphite-900); --fold-color-bg-header: var(--fold-ref-graphite-950); --fold-color-bg-rail-primary: var(--fold-ref-graphite-900); --fold-color-bg-rail-secondary: var(--fold-ref-graphite-850); --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-navyink-50) 4%, transparent ); } /* ── Extra theme: TITAN ─────────────────────────────────────── Brushed titanium, light + warm. A cool brushed-steel ground — the header + rails sit at the page's own tint, so the top reads frameless — with bright polished cards that float off it on the shared elevation shadow (that lift is the "raised metal piece", no per-theme shadow needed). The brand is HEAT-anodized titanium: the copper-orange the metal takes when torched, warming the whole steel read. Content borders re-point to a SOLID steel primitive (a palpable machined seam, where the light themes use an alpha hairline); corners soften in scales.css. Status families hold at the lumen (light) tints — only ground + brand move. Uniform-polarity, so no chrome override is needed. */ [data-theme="titan"] { /* Surfaces — header + rails at the page's own tint (a frameless top) */ --fold-color-bg-page: var(--fold-ref-steel-200); --fold-color-bg-header: var(--fold-ref-steel-150); --fold-color-bg-rail-primary: var(--fold-ref-steel-100); --fold-color-bg-rail-secondary: var(--fold-ref-steel-150); --fold-color-bg-rail-tertiary: color-mix( in srgb, var(--fold-ref-black) 3%, transparent ); /* Primary / accent — heat-anodized copper-orange, deep enough for white */ --fold-color-brand: var(--fold-ref-titanium-500); --fold-color-on-brand: var(--fold-ref-white); --fold-color-primary: var(--fold-ref-titanium-500); --fold-color-primary-strong: var(--fold-ref-titanium-600); --fold-color-on-primary: var(--fold-ref-white); --fold-color-primary-text: var(--fold-ref-titanium-700); --fold-color-primary-surface: color-mix( in srgb, var(--fold-ref-titanium-500) 10%, transparent ); --fold-color-primary-border: color-mix( in srgb, var(--fold-ref-titanium-500) 28%, transparent ); /* Info (purple) — lumen tint */ --fold-color-info: var(--fold-ref-purple-600); --fold-color-on-info: var(--fold-ref-white); --fold-color-info-text: var(--fold-ref-purple-500); --fold-color-info-surface: color-mix( in srgb, var(--fold-ref-purple-600) 8%, transparent ); --fold-color-info-border: color-mix( in srgb, var(--fold-ref-purple-600) 22%, transparent ); /* Warning (amber) */ --fold-color-warning: var(--fold-ref-amber-600); --fold-color-on-warning: var(--fold-ref-graphite-950); --fold-color-warning-text: var(--fold-ref-amber-550); --fold-color-warning-surface: color-mix( in srgb, var(--fold-ref-amber-600) 8%, transparent ); --fold-color-warning-border: color-mix( in srgb, var(--fold-ref-amber-600) 22%, transparent ); /* Alert (red) */ --fold-color-alert: var(--fold-ref-red-600); --fold-color-on-alert: var(--fold-ref-white); --fold-color-alert-text: var(--fold-ref-red-450); --fold-color-alert-surface: color-mix( in srgb, var(--fold-ref-red-600) 8%, transparent ); --fold-color-alert-border: color-mix( in srgb, var(--fold-ref-red-600) 22%, transparent ); /* Success (green) */ --fold-color-success: var(--fold-ref-green-500); --fold-color-on-success: var(--fold-ref-graphite-950); --fold-color-success-text: var(--fold-ref-green-550); --fold-color-success-surface: color-mix( in srgb, var(--fold-ref-green-500) 10%, transparent ); --fold-color-success-border: color-mix( in srgb, var(--fold-ref-green-500) 25%, transparent ); /* Text — graphite on the light page (high contrast) */ --fold-color-text: var(--fold-ref-steel-900); --fold-color-text-secondary: var(--fold-ref-steel-600); --fold-color-text-muted: var(--fold-ref-steel-500); --fold-color-text-faded: var(--fold-ref-steel-400); /* Card — a bright polished-steel plate that floats off the silver ground */ --fold-color-surface-card: var(--fold-ref-steel-50); --fold-color-surface-sunken: var(--fold-ref-steel-100); /* Neutral surfaces — faint black overlays for hover/raise cues on light */ --fold-color-surface-subtle: color-mix( in srgb, var(--fold-ref-black) 3%, transparent ); --fold-color-surface-raised: color-mix( in srgb, var(--fold-ref-black) 5%, transparent ); --fold-color-surface-hover: var( --fold-ref-steel-150 ); /* solid raised hover */ --fold-color-surface-band: var(--fold-ref-steel-150); /* Borders — SOLID brushed-steel seams (the palpable metal edge), where the light themes use an alpha hairline. */ --fold-color-border: var(--fold-ref-steel-300); --fold-color-border-subtle: var(--fold-ref-steel-150); /* Glass — frosted brushed steel */ --fold-color-glass: color-mix( in srgb, var(--fold-ref-steel-50) 66%, transparent ); --fold-color-glass-border: color-mix( in srgb, var(--fold-ref-black) 12%, transparent ); /* Scrim — a darkening veil behind the mobile nav drawer. */ --fold-color-scrim: color-mix( in srgb, var(--fold-ref-black) 45%, transparent ); }