/* ============================================================= HYPRGOOD · DESIGN TOKENS · the single source of truth The Canon → the Press → the Output. Every page imports this. Edit a value HERE and it changes everywhere. No more one-offs. TWO WORLDS, ONE SYSTEM: · THE TREASURE MAP (default) — warm aged-yellow paper, ink, bronze-gold, the red seal. The house: the site, the book, the front door. · THE VOID (.theme-void) — navy void + gold. The board, the cinema. Both palettes are LIFTED from Reed's own work: paper #F0E2B5 + ink #0a0a0a + bronze #8b6f2a + seal #e62525 → from 06-BOOK-AND-COPY/PROCESS-MAPS/THE-HARMONIC-PYRAMID.svg void #0b0e1a + gold #cda44e + wound #8b1820 → from 02-BOARD-AND-APP/SeedDeck-WebApp/seed-deck-v5.html Locked 2026-06-15. ============================================================= */ :root { /* --------------------------------------------------------------- RAW PALETTE · the named pigments (both worlds). Never use these directly in a page — use the SEMANTIC tokens below. This block is the paintbox; the semantic block is which paint goes where. --------------------------------------------------------------- */ /* THE TREASURE MAP (paper world) */ --paper: #f0e2b5; /* the treasure paper — the hero ground */ --paper-cream: #ece0ac; /* aged map section — panels (warm, NOT white) */ --paper-lit: #f3e4a8; /* warm GOLD treasure — cards (richened 2026-06-15, no more pale/white) */ --paper-edge: #ddcd9f; /* aged edge / a soft rule on paper */ --ink: #0a0a0a; /* the map ink — near-black (the mark's stroke) */ --ink-soft: #1f1f1f; --ink-mute: #6b5f4e; /* warm taupe — secondary text on paper */ --ink-faint: #8c8170; /* faint brown — captions, hairlines */ --bronze: #a9842f; /* the book/board gold — headings, rules on paper */ --bronze-deep: #7a6b44; --bronze-lt: #c9a24a; /* lighter book gold highlight */ /* the suite / planet accent colors — lifted from THE-BOOK.html (on treasure) */ --c-blue: #5b8aa6; --c-green: #4f7a4a; --c-purple: #9c5b8f; --c-orange: #c0622f; --c-gold: #c9a24a; --c-red: #c0392b; --c-silver: #8a93a6; /* THE VOID (board / cinema world) */ --void: #0b0e1a; /* navy void — the ground */ --void-2: #141a30; /* raised void — panels */ --void-deep: #05060d; /* deepest edge of frame */ --void-glow: #1b2444; /* the sky lifting at the horizon */ --gold: #cda44e; /* the Deco gold */ --gold-lt: #e7cf94; --gold-dim: #8a7038; --void-paper: #f3eee2; /* parchment text on the void */ --void-mute: #8b93ad; /* muted slate on the void */ /* THE RED · the source · shared by both worlds */ --seal: #e62525; /* THE RED DOT — the mark's vertex, the source */ --wound: #8b1820; /* the deep wax-seal red (Scorpio) */ --wound-warm: #b23b2e; /* the warmer map red */ --wound-dark: #8b0000; /* accents seen in the maps (use sparingly — suite/diagram color) */ --accent-green: #3c7a3c; --accent-blue: #3a6ea5; /* --------------------------------------------------------------- SEMANTIC TOKENS · DEFAULT = THE TREASURE MAP Pages reference ONLY these. Swap the theme, the whole page turns. --------------------------------------------------------------- */ --bg: var(--paper); /* page ground */ --bg-raised: var(--paper-cream); /* panels, sections */ --surface: var(--paper-lit); /* cards / insets */ --surface-edge: var(--paper-edge); --text: var(--ink); /* primary text */ --text-soft: var(--ink-soft); --text-mute: var(--ink-mute); /* secondary */ --text-faint: var(--ink-faint); /* captions */ --accent: var(--bronze); /* gold/bronze — headings, the law */ --accent-bright:var(--bronze-lt); --accent-deep: var(--bronze-deep); --mark-stroke: var(--ink); /* the ┐ stroke color on this ground */ --dot: var(--seal); /* the red dot */ --rule: rgba(139,111,42,.45); /* bronze hairline */ --rule-strong: rgba(139,111,42,.70); --rule-faint: rgba(108,95,78,.30); --panel: rgba(247,244,238,.72); /* translucent cream */ --scrim: rgba(10,10,10,.55); --glow-accent: 0 0 38px -16px rgba(139,111,42,.5); --glow-dot: 0 0 24px -6px rgba(230,37,37,.55); --shadow-card: 0 18px 44px -22px rgba(60,45,15,.45); /* ---- TYPE · the three voices ---- */ --font-serif: Georgia, "Times New Roman", serif; /* the maps' own face — Trajan stand-in */ --font-sans: Helvetica, Arial, sans-serif; /* tags, labels, UI */ --font-mono: Menlo, Monaco, "Courier New", monospace; /* coordinates, code */ --fs-display: clamp(40px, 8vw, 76px); --fs-h1: clamp(32px, 5.5vw, 54px); --fs-h2: clamp(22px, 3vw, 30px); --fs-h3: 20px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 11px; --lh-tight: 1.15; --lh-snug: 1.4; --lh-body: 1.7; --ls-display: .04em; --ls-wide: .22em; --ls-label: .08em; --fw-reg: 400; --fw-bold: 700; /* ---- SPACE · 4px rhythm ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; /* ---- FORM ---- */ --radius:6px; --radius-lg:12px; --radius-pill:999px; /* ---- LAYOUT ---- */ --maxw:1200px; --maxw-readable:680px; --gutter:24px; /* ---- MOTION ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-in: cubic-bezier(.4,0,1,1); --dur-fast:.25s; --dur:.6s; --dur-slow:1.2s; /* ---- Z ---- */ --z-stars:0; --z-base:1; --z-nav:50; --z-modal:100; } /* =============================================================== THEME · THE VOID — for the board & the cinema (the dark skin). Add class="theme-void" to (or any wrapper) to flip. =============================================================== */ .theme-void { --bg: var(--void); --bg-raised: var(--void-2); --surface: var(--void-2); --surface-edge: rgba(205,164,78,.35); --text: var(--void-paper); --text-soft: var(--void-paper); --text-mute: var(--void-mute); --text-faint: var(--void-mute); --accent: var(--gold); --accent-bright:var(--gold-lt); --accent-deep: var(--gold-dim); --mark-stroke: var(--gold); --dot: var(--seal); --rule: rgba(205,164,78,.35); --rule-strong: rgba(205,164,78,.55); --rule-faint: rgba(205,164,78,.18); --panel: rgba(20,26,48,.70); --scrim: rgba(5,6,13,.72); --glow-accent: 0 0 44px -14px rgba(205,164,78,.45); --glow-dot: 0 0 28px -6px rgba(230,37,37,.6); --shadow-card: 0 24px 60px -24px rgba(0,0,0,.7); } /* =============================================================== THEME · THE SAFARI — gold + purple / dark neon (the premiere realm). The dark twin of the treasure map: Deco, but lit by neon. The SHIFT. Add class="theme-safari". Locked 2026-06-15. =============================================================== */ .theme-safari { --bg: #0c0716; /* deep aubergine-black — the dark realm ground */ --bg-raised: #170d2b; --surface: #1d1138; --surface-edge: rgba(180,107,255,.35); --text: #f1e9ff; /* pale violet light (text ON dark — never a white ground) */ --text-soft: #f1e9ff; --text-mute: #c2b1e4; --text-faint: #8f7fb8; --accent: var(--gold); --accent-bright:var(--gold-lt); --accent-deep: var(--gold-dim); --neon: #b46bff; /* electric violet — the dark-neon glow */ --neon-2: #ff5cc8; /* neon magenta — sparingly */ --mark-stroke: var(--gold); --dot: var(--seal); --rule: rgba(205,164,78,.40); --rule-strong: rgba(180,107,255,.55); --rule-faint: rgba(205,164,78,.18); --panel: rgba(29,17,56,.72); --scrim: rgba(8,4,16,.74); --glow-accent: 0 0 44px -12px rgba(205,164,78,.5); --glow-neon: 0 0 40px -8px rgba(180,107,255,.65); --glow-dot: 0 0 28px -6px rgba(230,37,37,.6); --shadow-card: 0 24px 60px -24px rgba(0,0,0,.8); } /* Honor reduced-motion globally */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast:.001s; --dur:.001s; --dur-slow:.001s; } }