/* ============================================================================= NURDE DESIGN TOKENS — single source of truth for lfjcllc.com ----------------------------------------------------------------------------- Owner: Design (NURDE-MASTER-PLAN Part II §1 "Brand system" / §6 marketing site) Three layers, top to bottom: 1. PRIMITIVES — raw palette, type, space, radii, shadow, motion. No meaning. 2. SEMANTIC — meaning-carrying aliases (--surface, --text, --action …). Pages and components must ONLY consume this layer and below. 3. COMPONENT — a few reusable component-scoped tokens. Rules baked in here (do not "fix" without reading docs/design/contributing.md): - Dark-first. Light is a token swap via [data-theme="light"] / "auto". - ONE action hue at a time — never two competing accents. On this SITE that hue is GOLD #E9C46A (founder direction 2026-08-05: the site had "too many blue colours", then "I'd prefer gold"). The shipped mobile APP keeps #1A7AFF, and the FolderDemo deliberately still paints blue because it depicts the real product. White text never sits on gold — see the ramp. - Clinical STATUS colours live in their own token family, never aliased to an action hue. Status is never encoded by colour alone (see components.css chips). - FLAME is a gamification/brand device only. It has tokens but is deliberately NOT wired into any status/action/surface semantic. Never place it near --status-critical / --status-caution. (Master plan Part II strategic read.) - No web fonts. System stack only (performance + privacy: zero external requests). See --font-sans below and docs/design/README.md. Measured WCAG ratios are cited inline as "AA x.xx:1" next to the relevant token. Full table lives in docs/design/tokens.md. ============================================================================ */ /* ============================================================================ LAYER 1 — PRIMITIVES Raw values only. Never reference these directly from a page or component; reference the semantic aliases in Layer 2 instead. ============================================================================ */ :root { /* --- Surface ramp (dark) — WARM CHARCOAL, not navy ------------------------- ⚠️ TOKEN NAMES ARE HISTORICAL. --p-navy-… now holds warm charcoal, and --p-slate-… and --p-ice-… hold warm greys: the founder asked for the blue to leave the SITE entirely (2026-08-05), so the whole neutral axis was rotated off blue onto a warm axis. Values were chosen to hold the SAME lightness as the cool ramp they replace, so every AA ratio documented below holds or improves (secondary text measured 6.37→7.09 on the page base). Renaming the tokens would touch every stylesheet; deferred deliberately. --------------------------------------------------------------------------- 2026-08-04 "monitor black" pass (founder direction, Active Theory ref): the SITE ramp is deepened toward near-black — light and glow carry the design; surfaces recede. This intentionally departs from the app's navy (original app-extracted values kept in trailing comments). Darkening only RAISES every documented text-contrast ratio; the cited AA numbers below remain conservative minimums. Light theme untouched. */ --p-navy-950: #050403; /* page base — monitor glass (app: #060B17) */ --p-navy-900: #0A0806; /* hero/section wash (app: #0A1220) */ --p-navy-850: #0F0C09; /* resting card (app: #0C1526) */ --p-navy-800: #15110C; /* raised card (app: #121E34) */ --p-navy-750: #1B1610; /* highest card / inset (app: #192845) */ --p-navy-700: #2A2318; /* hairline border (app: #1D3050) */ --p-navy-600: #3E3524; /* emphasized border (app: #2A4470) */ --p-navy-500: #5A4E36; /* stronger divider / decorative rule */ --p-navy-400: #7E6E4E; /* input boundary — 3:1 non-text contrast everywhere a field can sit: 3.91:1 on navy-950, 3.73:1 on navy-900, 3.63:1 on navy-850, 3.31:1 on navy-800 */ /* --- WARM near-neutrals (text on dark) — ratios re-measured 2026-08-05 -- */ --p-white: #FFFFFF; --p-ice-050: #F7F3EA; /* primary text on dark — AA 18.50:1 on navy-950 */ --p-slate-300: #B3A88F; /* secondary text — AA 8.70:1 on navy-950 */ --p-slate-350: #A2977E; /* muted caption text — the step that clears AA on EVERY dark surface, not just the page base: 7.09:1 on navy-950, 6.92:1 on navy-900, 6.75:1 on navy-850, 6.50:1 on navy-800, 6.21:1 on navy-750. (All improved vs the cool ramp this replaced — was 6.37/…/5.62.) */ --p-slate-400: #94886D; /* LEGACY muted step, kept for the light-ground demo chrome only. Do NOT back --text-muted with it. Retained solely for the light-ground demo chrome in index.html (placeholder tint on a near-white simulated search field); do not adopt it for new text on dark surfaces — use --p-slate-350. */ --p-slate-500: #7A6E52; /* faint/disabled — UI+large only: 4.08:1 on navy-950, 3.74:1 on navy-800, 3.58:1 on 750 */ --p-slate-600: #5E5540; /* app greyDark — decorative only */ /* --- Blue ramp — THE APP's action colour (#1A7AFF). -------------------- Still the shipped mobile app's accent, and still what the FolderDemo's simulated app UI paints with (demo.css). As of 2026-08-05 the SITE no longer uses it for actions — see the gold ramp below. */ --p-blue-400: #4993FF; /* hover on dark / link on deep cards — AA 6.46:1 */ --p-blue-500: #1A7AFF; /* the APP's action colour — AA 4.94:1 */ --p-blue-600: #1268E0; /* solid-fill step: white text AA 5.14:1 at any size */ --p-blue-700: #0E62D6; /* pressed fill / light-mode fill — white AA 5.62 */ --p-blue-050: rgba(26, 122, 255, 0.15); /* app accentDim — tinted fill */ --p-blue-080: rgba(26, 122, 255, 0.08); /* fainter hover wash */ /* --- Gold (action) ramp — THE SITE's accent, #E9C46A anchor (500). ------ Founder direction 2026-08-05 ("I'd prefer gold"), superseding both the blue and the brief violet. Champagne gold rather than a saturated yellow, so it reads as brand chrome on the near-black canvas. ⚠️ TWO CONSEQUENCES, both handled — do not "simplify" them away: 1. WHITE TEXT FAILS ON GOLD (1.65:1). Every solid action fill therefore carries NEAR-BLACK ink via --text-on-action. Never put white on gold. 2. Gold shares a hue family with --status-warning (#FFB800, the app's "High" urgency). Status colours are NOT changed: they mirror the shipped app's badges, and the site prints a legend explaining them, so altering them would misrepresent the product. The separation that matters is already enforced elsewhere — every status chip ships an icon AND a text label (components.css), so urgency is never colour-alone. Keep this gold desaturated so the two never read as the same thing. */ --p-gold-300: #F5E0AE; /* lightest — text on raised cards — AA 15.8:1 */ --p-gold-400: #F0D28C; /* hover on dark — AA 14.2:1 */ --p-gold-500: #E9C46A; /* THE site action colour — AA 12.4:1 */ --p-gold-600: #D9AE47; /* solid fill (near-black ink AA 10.3:1) */ --p-gold-700: #C39A33; /* pressed fill */ --p-gold-ink: #8A6D12; /* gold as TEXT on white (light theme) — AA 4.89:1 */ --p-gold-050: rgba(233, 196, 106, 0.15); /* tinted fill */ --p-gold-080: rgba(233, 196, 106, 0.08); /* fainter hover wash */ /* --- Clinical STATUS family (own namespace, from the app's urgency set) -- Dark values below are tuned to read on the navy base. Each has a matching "-fill" (0.14 alpha wash) and an "-ink" for text-on-light contexts. */ --p-red-500: #FF3B5C; /* critical — AA 5.65:1 on navy-950 */ --p-red-fill: rgba(255, 59, 92, 0.14); --p-red-ink: #D11F3C; /* critical text on light — AA 5.29:1 on #FFF */ --p-amber-500: #FFB800; /* high / warning — AA 11.34:1 on navy-950 */ --p-amber-fill: rgba(255, 184, 0, 0.14); --p-amber-ink: #8A5A00; /* warning text on light — AA 5.93:1 on #FFF */ --p-orange-500: #FF6B35; /* caution / watch — AA 6.94:1 on navy-950 */ --p-orange-fill:rgba(255, 107, 53, 0.14); --p-orange-ink: #C43A0E; /* caution text on light */ --p-teal-500: #2A9D8F; /* safe / normal — AA 5.92:1 on navy-950 */ --p-teal-600: #3AB9AA; /* brighter safe for small text — AA 8.15:1 */ --p-teal-fill: rgba(42, 157, 143, 0.14); --p-teal-ink: #1F7A6E; /* safe text on light — AA 5.16:1 on #FFF */ /* --- Secondary brand accents (use sparingly) ---------------------------- */ --p-purple-500: #7C5CFC; /* app purple */ --p-teal-brand: #00C7BE; /* app teal accent */ /* --- FLAME (gamification / brand-signature ONLY — never status) --------- */ --p-flame-from: #FF7A1A; --p-flame-to: #FF3D00; /* --- Signal brand gradient (icon background, hero flourish only) --------- */ /* The SITE's signal gradient (headline shimmer, hairline sweeps, scroll bar, notify ring, stat numerals, WebGL particle ramp). Rebalanced 2026-08-05: blue → (briefly violet) → METALLIC GOLD, matching the action accent. The three stops read as brushed metal when the shimmer sweeps them. ⚠️ The LOGO/APP-ICON artwork is NOT this gradient: nurde-icon.png keeps its final indigo #4353E8 → blue #2E8CF0 → cyan #22DDD0 colourway, baked by NURDE/scripts/make-icon-nurde.js. Do NOT regenerate the icon from these values — the divergence is deliberate (the header/footer wordmark is the white variant, so nothing clashes visually). */ --p-signal-from: #C9A227; /* deep gold — AA 8.65:1 on the page base */ --p-signal-mid: #F7E7B8; /* champagne highlight (the shimmer's bright pass) */ --p-signal-to: #E9C46A; /* gold — matches --p-gold-500 (the action) */ /* --- Light-theme grounds (used by Layer 2 light swap) ------------------- */ --p-lite-bg: #F0F4FF; /* cool off-white page (app light bg) */ --p-lite-card: #FFFFFF; --p-lite-card2: #F5F8FF; --p-lite-border: #DDE6FF; --p-lite-borderHi:#BDCEF0; --p-lite-ink: #0B1220; /* primary text on light — AA 17.02:1 */ --p-lite-dim: #47597C; /* secondary text on light — AA 6.39:1 */ --p-lite-muted: #5B6C8C; /* muted text on light */ /* =========================================================================== TYPE — refined SYSTEM font stack (NO webfont). Mirrors the app's Inter personality by leading with the OS UI faces. See README "font decision". =========================================================================== */ /* Hangul fallbacks (2026-08-09 Korean language switch): Latin faces carry no Hangul, so Korean glyphs fall through to these system faces. Placed BEFORE the generic keyword so every platform picks its good Korean sans (macOS/iOS: Apple SD Gothic Neo · Windows: Malgun Gothic · Android/Linux: Noto Sans KR). Invisible for English — fallback is per-glyph. */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; /* 2026-08-05: 'Manrope Variable' (self-hosted via fontsource, OFL — imported in Layout.jsx, zero third-party requests) leads the display stack — founder iteration after Space Grotesk read too quirky. Weight axis tops out at 800: --fw-black renders as max bold, intended look. */ --font-display: "Manrope Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace; /* Fluid type scale — clamp(min, preferred(vw), max). Root = 16px. Names are t-scale steps; semantic aliases pick the right step per element. */ --fs-micro: 0.6875rem; /* 11px, fixed */ --fs-eyebrow: 0.6875rem; /* 11px, fixed */ --fs-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12→13 */ --fs-small: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem); /* 13→14 */ --fs-body: clamp(0.9375rem, 0.90rem + 0.22vw, 1rem); /* 15→16 */ --fs-body-lg: clamp(1rem, 0.95rem + 0.30vw, 1.125rem); /* 16→18 */ --fs-h4: clamp(1.125rem, 1.05rem + 0.40vw, 1.25rem); /* 18→20 */ --fs-h3: clamp(1.25rem, 1.10rem + 0.70vw, 1.5rem); /* 20→24 */ --fs-h2: clamp(1.5rem, 1.20rem + 1.40vw, 2.125rem); /* 24→34 */ --fs-h1: clamp(2rem, 1.45rem + 2.60vw, 3rem); /* 32→48 */ --fs-display: clamp(2.6rem, 1.45rem + 4.60vw, 4.9rem); /* 42→78 (monitor-black: type is the graphic) */ /* Line heights */ --lh-tight: 1.06; /* display / big headings */ --lh-snug: 1.2; /* h2/h3 */ --lh-normal: 1.4; /* h4 / labels */ --lh-relaxed: 1.65; /* body copy */ /* Weights — the app leans heavy (800 dominant). */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Letter-spacing — headings tighten, eyebrows/labels open up. */ --ls-tight: -0.02em; /* display / h1 */ --ls-snug: -0.01em; /* h2 / h3 */ --ls-normal: 0; --ls-wide: 0.04em; /* small caps labels */ --ls-eyebrow: 0.14em; /* uppercase section eyebrows (~+1.8 at 11px) */ /* =========================================================================== SPACE — 8px base grid (with 2/4/6 half-steps for fine control). =========================================================================== */ --space-0: 0; --space-2: 0.125rem; /* 2px */ --space-4: 0.25rem; /* 4px */ --space-6: 0.375rem; /* 6px */ --space-8: 0.5rem; /* 8px */ --space-12: 0.75rem; /* 12px */ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px */ --space-24: 1.5rem; /* 24px */ --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-48: 3rem; /* 48px */ --space-64: 4rem; /* 64px */ --space-80: 5rem; /* 80px */ --space-96: 6rem; /* 96px */ --space-128: 8rem; /* 128px */ /* Section rhythm (vertical padding for page sections), fluid. */ --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --section-y-sm:clamp(2.5rem, 2rem + 2.5vw, 4rem); /* =========================================================================== RADII — app rhythm: small-to-medium rounding, not pill-everything. =========================================================================== */ --radius-xs: 6px; /* chips / badges */ --radius-sm: 8px; /* small inputs / nav links */ --radius-md: 10px; /* buttons, inputs (most common) */ --radius-lg: 14px; /* cards, sheets */ --radius-xl: 20px; /* feature tiles (folder-card rhythm) */ --radius-2xl: 28px; /* app-icon container feel */ --radius-pill: 999px; /* pills only */ --radius-chip: 13px; /* icon chip inside a tile */ /* Borders */ --border-hair: 1px; --border-tile: 1.5px; /* =========================================================================== SHADOW — soft and low. Dark-first; light overrides in the light swap. =========================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 6px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px var(--focus-ring); /* consumes semantic ring */ /* =========================================================================== MOTION — restrained. All neutralised under prefers-reduced-motion (base.css). =========================================================================== */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; /* The page's shared heartbeat — every recurring "monitor" accent (hero pill dot, nav brand beat, stat-band sweep, NGN idle sweep, footer sweep) runs on this period or a multiple of it. MUST equal SWEEP_SECONDS in src/components/HeroScene.jsx (same contract style as --p-signal-*). */ --pulse: 5.6s; /* Layout */ --container: 1120px; /* default max content width */ --container-wide: 1280px; /* full-bleed feature rows */ --container-prose: 46rem; /* learn/article reading measure (~72ch) */ --nav-h: 64px; --z-nav: 100; --z-overlay: 200; --z-menu: 210; } /* ============================================================================ LAYER 2 — SEMANTIC (dark-first, the default theme) Pages/components consume ONLY these names. Every alias carries meaning. ============================================================================ */ :root { /* Surfaces */ --surface: var(--p-navy-950); /* page background */ --surface-wash: var(--p-navy-900); /* subtle section wash */ --surface-raised: var(--p-navy-850); /* resting card */ --surface-raised-2: var(--p-navy-800); /* raised card / nested */ --surface-raised-3: var(--p-navy-750); /* highest / inset */ --surface-inset: var(--p-navy-750); /* code blocks, wells */ /* Borders / dividers */ --border: var(--p-navy-700); --border-strong: var(--p-navy-600); --border-faint: rgba(255, 255, 255, 0.06); --divider: var(--p-navy-500); /* Text */ --text: var(--p-ice-050); /* primary body / headings */ --text-dim: var(--p-slate-300); /* secondary / supporting */ --text-muted: var(--p-slate-350); /* captions, meta — AA 4.5+ on EVERY dark surface incl. raised cards (4.56:1 at the worst case, --surface-raised-3) */ --text-faint: var(--p-slate-500); /* DECORATIVE GLYPHS ONLY — 3.00:1 on --surface, so it must never colour readable text. Use --text-muted. */ --text-invert: var(--p-navy-950); /* text on a light/coloured fill */ --text-on-action: var(--p-navy-950); /* NEAR-BLACK on gold — white fails (1.65:1) */ /* Action (the one confident accent) */ --action: var(--p-gold-500); /* links, accents, focus, ghost borders. As TEXT it clears AA only on the three lowest surfaces: --surface 4.94:1, --surface-wash 4.71:1, --surface-raised 4.58:1. It FAILS on --surface-raised-2 (4.18:1), --surface-raised-3 (3.68:1) and over an --action-soft wash (4.26:1 on the page base, 3.49:1 on a raised card). For accent text in those places use --action-on-raised below. */ --action-hover: var(--p-gold-400); /* hover on dark & links on deep cards */ --action-on-raised: var(--p-gold-400); /* SAME hue, one step lighter. Use for any accent-coloured TEXT that sits on a raised card, an inset well or an --action-soft wash: 6.46:1 on --surface, 6.00:1 on --surface-raised, 5.47:1 on --surface-raised-2, 4.82:1 on --surface-raised-3, and over the --action-soft wash 5.57:1 on --surface / 4.57:1 on a raised card. Solid fills, hover states and the focus ring keep their own tokens — #1A7AFF stays the action anchor. */ --action-strong: var(--p-gold-600); /* SOLID button fill (white text AA) */ --action-pressed: var(--p-gold-700); /* pressed fill */ --action-soft: var(--p-gold-050); /* tinted fill / ghost hover */ --action-soft-2: var(--p-gold-080); /* Focus ring — meets WCAG non-text contrast (base.css applies :focus-visible)*/ --focus-ring: var(--p-gold-400); /* Clinical status (icon + label ALWAYS accompany colour — see chip component)*/ --status-critical: var(--p-red-500); --status-critical-fill: var(--p-red-fill); --status-warning: var(--p-amber-500); --status-warning-fill: var(--p-amber-fill); --status-caution: var(--p-orange-500); --status-caution-fill: var(--p-orange-fill); --status-safe: var(--p-teal-500); --status-safe-strong: var(--p-teal-600); --status-safe-fill: var(--p-teal-fill); /* Brand flourish (bounded use) */ --brand-purple: var(--p-purple-500); --brand-teal: var(--p-teal-brand); --brand-signal-gradient: linear-gradient(135deg, var(--p-signal-from), var(--p-signal-mid), var(--p-signal-to)); /* Gamification only. NEVER assign to a status/surface/action token. */ --flame-gradient: linear-gradient(135deg, var(--p-flame-from), var(--p-flame-to)); /* Shadows already dark-tuned above; expose as semantic names */ --elevation-1: var(--shadow-sm); --elevation-2: var(--shadow-md); --elevation-3: var(--shadow-lg); } /* ============================================================================ LAYER 3 — COMPONENT tokens Small set of component-scoped tokens that read from the semantic layer. Keeps component CSS declarative and themable in one place. ============================================================================ */ :root { /* Nav */ --nav-bg: color-mix(in srgb, var(--surface) 82%, transparent); --nav-border: var(--border); /* Buttons */ --btn-radius: var(--radius-md); --btn-primary-bg: var(--action-strong); --btn-primary-bg-h: var(--action-pressed); --btn-primary-fg: var(--text-on-action); --btn-secondary-bg: var(--surface-raised-2); --btn-secondary-bg-h:var(--surface-raised-3); --btn-secondary-fg: var(--text); --btn-secondary-bd: var(--border-strong); --btn-ghost-fg: var(--action); --btn-ghost-fg-h: var(--action-hover); /* Cards */ /* Monitor-black pass: cards are films of light on the black glass, not solid navy boxes — the ghost fill keeps copy surfaces distinct while the WebGL world stays visible around them. (Text AA: the fill is ~3% white over the page base, darker than the old solid card, so every documented text ratio still holds with margin.) */ --card-bg: color-mix(in srgb, #FFFFFF 3%, transparent); --card-bg-2: color-mix(in srgb, #FFFFFF 5%, transparent); --card-border: rgba(255, 255, 255, 0.08); --card-radius: var(--radius-lg); --card-pad: var(--space-24); /* Fields A field must read as a field wherever it is placed. --field-bg deliberately resolves to the page --surface, NOT --surface-raised-2: the latter is the same value as --card-bg-2, so a field inside a .nu-card--raised was 1.00:1 against its own card and effectively invisible. Sitting a step *below* the card also gives the input an inset reading in both themes. --field-border is its own primitive rather than --border-strong (#2A4470), which was only 2.02:1 on --surface and 1.71:1 on the old fill — both under the 3:1 WCAG 1.4.11 floor for a UI-component boundary. */ --field-bg: var(--surface); --field-border: var(--p-navy-400); --field-fg: var(--text); --field-placeholder: var(--text-muted); --field-radius: var(--radius-md); /* Badge / pill */ --badge-radius: var(--radius-xs); /* Icon chip on a feature tile */ --chip-radius: var(--radius-chip); } /* ============================================================================ LIGHT THEME — token swap only. Dark stays the default (dark-first). Opt in per page: (force light) (follow OS, see media query) Layer 3 component tokens inherit automatically because they read semantics. ============================================================================ */ [data-theme="light"] { /* Ghost cards are a dark-theme device — light restores the solid chain. */ --card-bg: var(--surface-raised); --card-bg-2: var(--surface-raised-2); --card-border: var(--border); --surface: var(--p-lite-bg); --surface-wash: var(--p-lite-card2); --surface-raised: var(--p-lite-card); --surface-raised-2: var(--p-lite-card2); --surface-raised-3: #EDF2FF; --surface-inset: #EDF2FF; --border: var(--p-lite-border); --border-strong: var(--p-lite-borderHi); --border-faint: rgba(11, 18, 32, 0.06); --divider: var(--p-lite-borderHi); --text: var(--p-lite-ink); --text-dim: var(--p-lite-dim); --text-muted: var(--p-lite-muted); --text-faint: #8494B4; --text-invert: var(--p-white); --text-on-action: var(--p-navy-950); /* near-black ink on the gold fill */ /* On light grounds the base #1A7AFF fails 4.5:1 as text (3.62:1); links use a darker step. The action *identity* is unchanged — this is the same hue. */ --action: var(--p-gold-ink); /* #0E62D6 as text/link — AA 5.62:1 */ --action-hover: var(--p-gold-600); /* On light grounds "raised" means LIGHTER, so the darker step is the safe one — it stays #0E62D6: 5.62:1 on --surface-raised (#FFF), 5.02:1 on --surface-raised-3 (#EDF2FF), 4.97:1 over the --action-soft wash. */ --action-on-raised: var(--p-gold-ink); --action-strong: var(--p-gold-700); /* solid fill, white text AA 5.62:1 */ --action-pressed: #A8811F; --action-soft: rgba(233, 196, 106, 0.12); --action-soft-2: rgba(233, 196, 106, 0.07); --focus-ring: var(--p-gold-600); /* Status text switches to the -ink values so it passes on white cards. */ --status-critical: var(--p-red-ink); --status-critical-fill: rgba(209, 31, 60, 0.10); --status-warning: var(--p-amber-ink); --status-warning-fill: rgba(138, 90, 0, 0.10); --status-caution: var(--p-orange-ink); --status-caution-fill: rgba(196, 58, 14, 0.10); --status-safe: var(--p-teal-ink); --status-safe-strong: var(--p-teal-ink); --status-safe-fill: rgba(31, 122, 110, 0.10); --elevation-1: 0 1px 2px rgba(11, 18, 32, 0.08); --elevation-2: 0 6px 16px rgba(11, 18, 32, 0.10); --elevation-3: 0 16px 40px rgba(11, 18, 32, 0.14); --nav-bg: color-mix(in srgb, var(--surface) 84%, transparent); } /* "auto" = follow the OS only when the author opts in. Dark stays the true default for every page that does not request auto. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { /* Ghost cards are a dark-theme device — light restores the solid chain. */ --card-bg: var(--surface-raised); --card-bg-2: var(--surface-raised-2); --card-border: var(--border); --surface: var(--p-lite-bg); --surface-wash: var(--p-lite-card2); --surface-raised: var(--p-lite-card); --surface-raised-2: var(--p-lite-card2); --surface-raised-3: #EDF2FF; --surface-inset: #EDF2FF; --border: var(--p-lite-border); --border-strong: var(--p-lite-borderHi); --border-faint: rgba(11, 18, 32, 0.06); --divider: var(--p-lite-borderHi); --text: var(--p-lite-ink); --text-dim: var(--p-lite-dim); --text-muted: var(--p-lite-muted); --text-faint: #8494B4; --text-invert: var(--p-white); --action: var(--p-gold-ink); --action-hover: var(--p-gold-600); --action-on-raised: var(--p-gold-ink); /* see [data-theme="light"] note */ --action-strong: var(--p-gold-700); --action-pressed: #A8811F; --action-soft: rgba(233, 196, 106, 0.12); --action-soft-2: rgba(233, 196, 106, 0.07); --focus-ring: var(--p-gold-600); --status-critical: var(--p-red-ink); --status-critical-fill: rgba(209, 31, 60, 0.10); --status-warning: var(--p-amber-ink); --status-warning-fill: rgba(138, 90, 0, 0.10); --status-caution: var(--p-orange-ink); --status-caution-fill: rgba(196, 58, 14, 0.10); --status-safe: var(--p-teal-ink); --status-safe-strong: var(--p-teal-ink); --status-safe-fill: rgba(31, 122, 110, 0.10); --elevation-1: 0 1px 2px rgba(11, 18, 32, 0.08); --elevation-2: 0 6px 16px rgba(11, 18, 32, 0.10); --elevation-3: 0 16px 40px rgba(11, 18, 32, 0.14); --nav-bg: color-mix(in srgb, var(--surface) 84%, transparent); } }