/* ═══════════════════════════════════════════════════════════════════════════ rd-tokens.css?v=rt1 - THE REDDENDA FUSION DESIGN SYSTEM (Wave-0 foundation) ─────────────────────────────────────────────────────────────────────────── Two pole palettes + one semantic bridge (SPEC §2). Components consume ONLY the bridge tokens (--bg / --ink / --accent-live …); the scenes remap them. Any estate page joins the system by including THIS stylesheet and stamping `data-scene="light|night"` on . Poles: [data-scene="light"] (default, the paper shell) · [data-scene="night"] Waypoint: --dusk (only inside the descent/ascent gradients). Every contrast ratio noted below is verified (SPEC §2). Also declares the self-hosted @font-faces (SPEC §3) so any page that includes rd-tokens.css can use Space Grotesk (display), IBM Plex Sans (body/UI), IBM Plex Mono (instrument voice), and Fraunces (the editorial accent). THE EDITORIAL ACCENT (SPEC §3, CONSTRAINTS §9): Fraunces ITALIC, subsetted to latin and committed to assets/fonts/fraunces-italic-latin-subset.woff2?v=fi1 (~28KB, wght axis). It is the single anti-AI-tell editorial move: the ≤4-word one-accent-per-act emotional phrase renders in Fraunces ITALIC. Loads swap, Georgia-italic metric fallback, never a preload, never the LCP node. The roman variable cut is also declared (family gene) but the accent uses italic. Use `.rd-accent` (below) for it. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SELF-HOSTED FONTS (no Google/CDN request; SPEC §3, CONSTRAINTS §9) ──────── */ /* Display - Space Grotesk variable (the grotesk "instrument" pole) */ @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap; src:url(/assets/fonts/space-grotesk-latin-var.woff2?v=hf1) format('woff2'); } /* Metric fallback for Space Grotesk - kills headline reflow (LCP protection) */ @font-face{ font-family:'SG Fallback';src:local('Arial'); size-adjust:105.5%;ascent-override:92%;descent-override:24%;line-gap-override:0%; } /* Body / UI - IBM Plex Sans variable */ @font-face{ font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap; src:url(/assets/fonts/ibm-plex-sans-var.woff2?v=ps1) format('woff2'); } @font-face{ font-family:'PS Fallback';src:local('Arial'); size-adjust:100.5%;ascent-override:98%;descent-override:26%;line-gap-override:0%; } /* Mono - IBM Plex Mono 500 / 600 (the instrument voice: every number, NPI, CPT) */ @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/ibm-plex-mono-500.woff2?v=pm1) format('woff2'); } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url(/assets/fonts/ibm-plex-mono-600.woff2?v=pm1) format('woff2'); } /* Editorial accent - Fraunces ITALIC subset (the single anti-AI-tell accent, SPEC §3). Loads swap; never a preload, never LCP. wght axis for the 520 accent weight. */ @font-face{ font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap; src:url(/assets/fonts/fraunces-italic-latin-subset.woff2?v=fi1) format('woff2'); } /* Fraunces ROMAN variable (family gene; retained for any upright display need) */ @font-face{ font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap; src:url(/assets/fonts/fraunces-latin-var.woff2?v=fr1) format('woff2'); } /* Metric fallback for Fraunces - Georgia italic, so the swap does not reflow the accent */ @font-face{ font-family:'FR Fallback';src:local('Georgia');font-style:italic; size-adjust:94%;ascent-override:96%;descent-override:24%;line-gap-override:0%; } /* ═══════════════════════════════════════════════════════════════════════════ FONT-STACK TOKENS + GEOMETRY + MOTION (scene-independent) ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* type stacks */ --disp:'Space Grotesk','SG Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --ui:'IBM Plex Sans','PS Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --accent-face:'Fraunces','FR Fallback',Georgia,'Times New Roman',serif; /* the TWO easings - the only two curves on the page (SPEC §6) */ --ease:cubic-bezier(.16,1,.3,1); /* everything */ --spring:cubic-bezier(.34,1.56,.64,1); /* pill morph, dock entrance, tilt spring-back, magnetic */ /* geometry (SPEC §2.6) */ --r-lg:26px; --r-md:18px; --r-sm:12px; --r-pill:999px; --container:1200px; --pad-inline:clamp(20px,4.5vw,48px); /* focus ring - identical in BOTH scenes (SPEC §2.4) */ --focus:#00C2A8; --focus-w:2.5px; --focus-offset:3px; /* the dusk waypoint - lives ONLY inside descent/ascent gradients (SPEC §2.3). It is the light shell's ink (#0B1917) doubling as the color of dusk. */ --dusk:#0B1917; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT POLE - [data-scene="light"] (default, the paper shell) · SPEC §2.1 Bound on :root too so a page with no data-scene stamp still renders the light shell (light is the default pole). ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-scene="light"]{ /* raw light-pole palette */ --l-bg0:#FAF9F5; /* page base - SHARED VALUE with reddenda.health --paper (the family bridge) */ --l-bg1:#F2F0E9; /* alternating act base (Act 2, 8) */ --l-card:#FFFFFF; /* cards; scorecard gradient #FFFFFF→#FBFAF5 */ --l-card-grad-end:#FBFAF5; --l-ink:#0B1917; /* primary text (green-black) 16.5:1 ✓ */ --l-ink2:#3D4B48; /* secondary / ledes 8.6:1 ✓ */ --l-ink3:#5F6E6A; /* captions, mono labels ≥11px 4.9:1 ✓ AA */ --l-line:rgba(11,25,23,.11); --l-line2:rgba(11,25,23,.06); --l-teal:#0A7C72; /* LIVE DATA + primary brand accent, link/eyebrow/CPT text 4.9:1 ✓ */ --l-teal-hot:#00C2A8; /* glows, live dots, focus ring ONLY (never text on paper) */ --l-teal-deep:#07524B; /* primary button gradient end */ --l-violet:#5F3DD3; /* LOCKED / PREMIUM (P90, PRO chips, tags) 6.9:1 ✓ */ --l-gold-ink:#8A6414; /* MONEY text on light (prices, seal lines) 5.4:1 ✓ */ --l-gold:#D9A84E; /* money fills / rules on light (gold seal rule) */ --l-mint-ink:#0C7A55; /* WIN / positive text 5.2:1 ✓ */ --l-rust:#C24717; /* PAIN: below-median bars, negative deltas 4.9:1 ✓ */ --l-rust-grad:#D97741; /* ── SEMANTIC BRIDGE (light values) - what every component actually uses ── */ --bg:var(--l-bg0); --bg-alt:var(--l-bg1); --surface:var(--l-card); --surface-grad-end:var(--l-card-grad-end); --glass:rgba(255,255,255,.82); /* light glass (nav over paper etc.) */ --ink:var(--l-ink); --ink-2:var(--l-ink2); --ink-3:var(--l-ink3); --line:var(--l-line); --line-2:var(--l-line2); --accent-live:var(--l-teal); /* teal/cyan = live data */ --accent-live-hot:var(--l-teal-hot); --accent-locked:var(--l-violet); /* violet = locked/premium */ --accent-money:var(--l-gold-ink); /* gold = money + seal (text) */ --accent-money-fill:var(--l-gold); /* gold fill/rule */ --accent-win:var(--l-mint-ink); /* mint = win/live-ok */ --accent-pain:var(--l-rust); /* rust/pink = pain */ --accent-pain-grad:var(--l-rust-grad); --btn-grad-start:var(--l-teal); --btn-grad-end:var(--l-teal-deep); /* selection: teal bg / white text on light */ --sel-bg:var(--l-teal); --sel-fg:#FFFFFF; /* the scene's value (mirror in JS) */ --theme-color:#FAF9F5; color-scheme:light; } /* ═══════════════════════════════════════════════════════════════════════════ NIGHT POLE - [data-scene="night"] (ONE dark spine; c2 family) · SPEC §2.2 ═══════════════════════════════════════════════════════════════════════════ */ [data-scene="night"]{ /* raw night-pole palette */ --n-bg0:#04060C; /* act base (descent floor, ceremony, arsenal) */ --n-bg1:#070A13; /* alternating night acts (desk, oath) */ --n-bg2:#0B101D; /* elevated night surfaces (cards, plans) */ --n-glass:rgba(13,19,34,.72); /* THE one glass literal (consoles, tool cards) */ --n-ink:#EAF2FF; /* primary text 17:1 ✓ */ --n-ink2:#9FB0CC; /* secondary 8.1:1 ✓ */ --n-ink3:#7A89A6; /* body-size tertiary 4.8:1 ✓ AA */ --n-ink4:#5C6B8A; /* micro mono labels ≥11px uppercase only (3.4:1 decorative) */ --n-line:rgba(140,170,220,.13); --n-line-strong:rgba(140,170,220,.24); --n-cyan:#00E5FF; /* LIVE DATA accent 11.2:1 ✓ */ --n-violet:#A78BFF; /* LOCKED / PREMIUM 7.1:1 ✓ */ --n-mint:#5EF2B8; /* WIN / live-ok / recovered 13.4:1 ✓ */ --n-gold:#D9A84E; /* MONEY - desk grade EXACTLY = desk.reddenda.com gold 7.3:1 ✓ */ --n-gold-hot:#F3CC7E; /* money hot 12:1 ✓ */ --n-pink:#FF7D9C; /* PAIN 7.6:1 ✓ */ /* ── SEMANTIC BRIDGE (night values) ── */ --bg:var(--n-bg0); --bg-alt:var(--n-bg1); --surface:var(--n-bg2); --surface-grad-end:var(--n-bg1); --glass:var(--n-glass); --ink:var(--n-ink); --ink-2:var(--n-ink2); --ink-3:var(--n-ink3); --ink-4:var(--n-ink4); --line:var(--n-line); --line-2:var(--n-line); --line-strong:var(--n-line-strong); --accent-live:var(--n-cyan); --accent-live-hot:var(--n-cyan); --accent-locked:var(--n-violet); --accent-money:var(--n-gold); --accent-money-fill:var(--n-gold); --accent-money-hot:var(--n-gold-hot); --accent-win:var(--n-mint); --accent-pain:var(--n-pink); --accent-pain-grad:var(--n-pink); --btn-grad-start:var(--n-cyan); --btn-grad-end:#0B8FA8; /* selection: cyan wash on night */ --sel-bg:rgba(0,229,255,.28); --sel-fg:var(--n-ink); --theme-color:#04060C; color-scheme:dark; } /* light pole also defines the neutral --ink-4 / --line-strong so components that read them never fall through to `initial` on the light scene */ :root,[data-scene="light"]{ --ink-4:var(--l-ink3); --line-strong:rgba(11,25,23,.2); --accent-money-hot:var(--l-gold); } /* ═══════════════════════════════════════════════════════════════════════════ SELECTION + FOCUS (both scenes) · SPEC §2.4 / §2.6 ═══════════════════════════════════════════════════════════════════════════ */ ::selection{background:var(--sel-bg);color:var(--sel-fg)} :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-offset); border-radius:4px; } /* ═══════════════════════════════════════════════════════════════════════════ THE EDITORIAL ACCENT - Fraunces ITALIC (SPEC §3 · the single anti-AI-tell) ≤4 words, MAX one per act, always the emotional clause. Italic, wght 520. ═══════════════════════════════════════════════════════════════════════════ */ .rd-accent{ font-family:var(--accent-face); font-weight:520; font-style:italic; /* Fraunces italic subset (fi1) - the editorial accent */ letter-spacing:-.005em; } /* ═══════════════════════════════════════════════════════════════════════════ GAUGE GRADIENT RE-ENCODE (scope-locked - Act 4 ceremony gauge ONLY) · SPEC §2.5 The production #score-machine instrument in Act 1 keeps score-machine.css?v=sm3's own arc UNTOUCHED. These tokens exist so ONLY the NEW ceremony gauge consumes the pain→median→P90 re-encode. Gold NEVER encodes below-median here. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --gauge-pain:#C24717; /* pain (start) */ --gauge-median:#0A7C72; /* median (55% stop) */ --gauge-p90:#5F3DD3; /* P90 (end, locked/violet) */ } [data-scene="night"]{ --gauge-pain:#FF7D9C; --gauge-median:#00E5FF; --gauge-p90:#A78BFF; } /* ═══════════════════════════════════════════════════════════════════════════ TEXTURE / GRAIN (SPEC §2.6, §0.7) • Grain is scoped to [data-scene="night"] .act ONLY, 2.5% feTurbulence. • Light acts carry a hairline dot-grid paper texture at 3%. Both are pointer-events:none overlay layers behind content (isolation-safe). Opt-in per act via `.act` (fixed chrome is not an .act, so nav/dock/footer never get grain). ═══════════════════════════════════════════════════════════════════════════ */ .act{position:relative} .act > *{position:relative;z-index:1} /* night grain - feTurbulence data-URI at 2.5% · rendered on ::after (POLISH fix 1/2) so a bespoke .act::before slot (e.g. the Desk gold glow) is never clobbered by grain and vice-versa. Grain therefore paints on ALL night acts without stealing ::before. */ [data-scene="night"] .act::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.025;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* light paper dot-grid at 3% */ [data-scene="light"] .act::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.03; background-image:radial-gradient(rgba(11,25,23,.9) .5px,transparent .5px); background-size:22px 22px; } /* honor reduced motion + the ?flat=1 debug kill for the decorative grain */ @media (prefers-reduced-motion:reduce){ [data-scene="night"] .act::after{mix-blend-mode:normal} } html.rd-flat .act::before,html.rd-flat .act::after{display:none} /* ═══════════════════════════════════════════════════════════════════════════ SCENE BASE - pages that opt fully into the system paint bg/ink from the bridge. (light-home.html is untouched this phase; estate pages add `.rd-scene` to body or rely on their own rules - this is the join hook, not a forced global reset.) ═══════════════════════════════════════════════════════════════════════════ */ .rd-scene{ background:var(--bg); color:var(--ink); font-family:var(--ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }