/* ========================================================= design-tokens.css -- Night Writer canonical token sheet --------------------------------------------------------- Single source of truth for every color, type, spacing, motion, and layout value used across the hub canvas + the 12 lesson pages + capstone. Future stylesheets should @import this file and reference variables only -- never re-declare a hex code, font stack, or duration inline. Values were extracted from: style.css -- twilight palette + chrome lesson-styles-v2.css -- pattern library lesson-styles-v3.css -- vinyl/cream paper paint lesson-styles-v4.css -- current (canonical) cream index.html -- canvas `C` color object + sleeve / sprite draws Divergences between v2/v3/v4 are noted in `_design/design-system.md`. When two files disagree, the v4 value (current) wins here. ========================================================= */ :root { /* ===================================================== COLOR -- sky and world (twilight chrome) ===================================================== */ --sky-deep: #1A1230; /* darkest night, top of sky */ --sky-dusk: #2A1F3D; /* main dusty purple */ --sky-glow: #5A3A6F; /* pink-purple horizon streak */ --sky-ember: #C26A8A; /* warm horizon pink */ /* M4 dawn additions. Values match the live `drawDawnSky` gradient literals in `index.html` (~L1068-1073). The additive dawn band paints over the twilight sky with alpha keyed by player.x in M4. */ --sky-dawn-cream: #FFD9A8; /* cream-amber horizon band (stop 0.74) */ --sky-dawn-ember: #7A4A6A; /* mid-haze ember (stop 0.45) */ --sky-dawn-violet: #3A2A55; /* blue-violet upper sky (stop 0.0) */ --grass-deep: #1A3D3A; /* deep teal-green */ --grass-near: #245555; /* nearer grass */ --road: #4A3D2A; /* warm brown winding path */ --road-edge: #2E2618; /* darker road edges */ /* ===================================================== COLOR -- light (lamps and windows) ===================================================== */ --lamp-on: #FFE08A; /* warm yellow glow */ --lamp-halo: rgba(255, 224, 138, 0.45); --lamp-halo-soft: rgba(255, 224, 138, 0.12); --lamp-off: #3A3530; /* unlit lamp body */ --lamp-post: #1F1A14; /* dark post */ /* New: lit window warm (M3 city block). Building windows read warmer than the lamps so the eye doesn't confuse interactive lamps with decorative window light. */ --lamp-window-warm: #F4C97A; /* Cool-glass window tint -- M3 city + M1 distant city. Promoted from the inline `COOL_WINDOW` literal next to `drawM3City` in index.html (~L1425). NOTE: the canvas still reads the literal directly; a future refactor should `getComputedStyle(...).getPropertyValue` this token instead. */ --window-cool: rgba(120, 160, 200, 0.55); /* ===================================================== COLOR -- notebook (cream paper, ink rules) v4 canonical values; v3 had slightly cooler paper. See `_design/design-system.md` for the divergence note. ===================================================== */ --paper: #F4ECDC; /* notebook page (v4 canon) */ --paper-shadow: #EADFC5; /* paper inset / cards */ --paper-edge: #E0D5BB; /* page edge / hairlines */ --ink: #2E1F14; /* body ink */ --ink-soft: #4A3424; /* secondary ink / journal text */ --ink-faint: #5C4632; /* tertiary ink */ --rule: #C8B89A; /* visible ruled line */ --rule-faint: #E0D5BB; /* faint ruled line / page rules */ /* ===================================================== COLOR -- accent (warm / cool / completed) ===================================================== */ --accent-warm: #A4392B; /* vinyl-red ink, primary CTA on paper */ --accent-cool: #2D5F6B; /* deep teal ink, secondary on paper */ --accent-gold: #B58A3A; /* muted gold ink */ --highlight: #F5D77E; /* marker yellow, sticky-note */ --neon-pink: #FF6B9D; /* twilight chrome accent */ --neon-cyan: #6BD5FF; /* twilight chrome accent */ --completed: #9DFF6B; /* completed lamp green-yellow */ --completed-ink: #4E7A2C; /* completed paper-context */ /* ===================================================== COLOR -- text (twilight chrome) ===================================================== */ --text: #E8DCC8; /* warm cream */ --text-dim: #8A7E6A; /* muted */ --text-bright: #FFF4DC; /* highlight */ /* ===================================================== COLOR -- shadow + binding ===================================================== */ --shadow: #0A0518; /* twilight depth */ --vignette: rgba(10, 5, 24, 0.6); --binding-shadow: rgba(58, 42, 31, 0.18); /* notebook binding */ /* ===================================================== TYPE -- font stacks ===================================================== */ --font-pixel: 'Press Start 2P', monospace; --font-mono: 'JetBrains Mono', 'VT323', ui-monospace, monospace; --font-display: 'VT323', monospace; --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* Sans-serif is legacy (twilight `style.css` only). Not for paper. Kept for the title overlay subtitle copy block. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* ===================================================== TYPE -- size scale (px, paper-context) Paired with a default --lh-* line-height. The notebook baseline grid is 28px (--rule-pitch); body type sits on 17px / 28px to align with ruled paper. ===================================================== */ --fs-eyebrow: 8px; --lh-eyebrow: 1.4; /* pixel meta */ --fs-body: 17px; --lh-body: 28px; /* paper body */ --fs-lead: 18px; --lh-lead: 28px; /* paper lead */ --fs-h3: 18px; --lh-h3: 28px; --fs-h2: 22px; --lh-h2: 28px; --fs-h1: 30px; --lh-h1: 36px; --fs-display: 44px; --lh-display: 1.1; /* sleeve title */ /* Pixel-font sizes (HUD, sleeve stamps, pattern labels). */ --fs-pixel-xs: 7px; --fs-pixel-sm: 8px; --fs-pixel-md: 9px; --fs-pixel-lg: 10px; --fs-pixel-xl: 14px; /* BEGIN button */ --fs-pixel-title: 30px; /* title overlay */ /* ===================================================== SPACING -- 4-8-12-16-24-32-48 grid ===================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ===================================================== MOTION transform / opacity transitions only. No background- color transitions on user-input elements (see design-system.md anti-patterns). ===================================================== */ --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: ease-out; --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 600ms; /* ===================================================== LAYOUT ===================================================== */ --book-w: 92vw; --book-w-max: 1500px; --book-h: min(82vh, 1100px); --book-h-min: 640px; --rule-pitch: 28px; /* the ruled-line baseline grid */ --gutter-w: 24px; /* gutter between two pages of a spread */ --book-pad-y: 40px; --book-pad-x: 48px; --nav-h: 56px; /* v4-nav footer height */ /* Radii used across paper cards and chrome cards. */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; /* Borders / hairlines. */ --hair: 1px; --rule-w: 1px; }