/* ============================================================================ LIVERPOOL STREET STATION — DESIGN TOKENS Mathematical foundations: - Type scale: Major Third (1.250) — balanced for long-form editorial - Spacing scale: powers of 2 anchored to 1rem (16px) - Fluid type: clamp() between 320px and 1200px viewports - Measure: 60–75ch for body text (optimal readability) - Vertical rhythm: line-height × font-size = consistent baseline Colour system: British Rail Corporate Identity (1965) Typography: Machine (monospace) vs Human (serif) contrast ============================================================================ */ :root { /* ==================== COLOUR SYSTEM ==================== British Rail 1965 manual + functional extensions */ /* Primary palette */ --rail-blue: hsl(214, 100%, 25%); /* #003C7F — BR corporate blue */ --rail-blue-dark: hsl(214, 100%, 18%); /* #002A5C — hover/active state */ --warning-yellow: hsl(51, 100%, 50%); /* #FFD700 — signal caution */ --platform-concrete: hsl(50, 4%, 77%); /* #C5C5BD — neutral surface */ --signal-red: hsl(348, 83%, 47%); /* #DC143C — danger / emphasis */ --signal-green: hsl(128, 53%, 33%); /* #2E7D32 — on time / safe */ --ink-black: hsl(0, 0%, 4%); /* #0A0A0A — text / darkest */ /* Surfaces */ --surface-paper: hsl(43, 33%, 93%); /* #F5F3E8 — aged timetable */ --surface-crt: hsl(215, 28%, 8%); /* #0D1117 — CRT terminal */ --surface-platform: hsl(47, 6%, 82%); /* #D4D2C5 — concrete */ /* Text hierarchy (WCAG AA compliant against --surface-paper) */ --text-primary: var(--ink-black); /* 18.4:1 contrast */ --text-secondary: hsl(0, 0%, 25%); /* #404040 — 9.7:1 */ --text-tertiary: hsl(0, 0%, 44%); /* #707070 — 5.1:1 */ --text-inverse: hsl(43, 33%, 93%); /* on dark backgrounds */ /* Persona accent colours */ --persona-tourist: hsl(217, 91%, 60%); /* #3B82F6 — discovery */ --persona-resident: hsl(220, 9%, 46%); /* #6B7280 — routine */ --persona-railbuff: hsl(0, 72%, 41%); /* #B91C1C — passion */ --persona-shopper: hsl(38, 92%, 50%); /* #F59E0B — accidental */ --persona-nightowl: hsl(263, 70%, 50%); /* #7C3AED — liminal */ /* Ghost Spaces extended tokens */ --ghost-void: hsl(266, 28%, 12%); /* deep purple-black */ --ghost-surface: hsl(20, 14%, 10%); /* #1C1917 — documentary bg */ --ghost-surface-alt: hsl(20, 25%, 4%); /* deeper documentary bg */ /* ==================== TYPOGRAPHY ==================== Major Third scale (1.250) — 7 steps Fluid: min at 320px vw, max at 1200px vw Formula: clamp(min, preferred, max) preferred = min + (max - min) * ((100vw - 320px) / (1200px - 320px)) ≈ min-rem + slope * 100vw */ /* Font stacks */ --font-display: 'Courier New', Courier, monospace; --font-body: Georgia, 'Times New Roman', Times, serif; --font-ticker: 'Lucida Console', Monaco, monospace; --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale — Major Third (×1.250) Step -2: 0.64rem → 0.64rem (10.24px) Step -1: 0.80rem → 0.875rem (12.8 → 14px) Step 0: 1.00rem → 1.125rem (16 → 18px) ← body Step 1: 1.25rem → 1.5rem (20 → 24px) Step 2: 1.563rem → 2.25rem (25 → 36px) Step 3: 1.953rem → 3.375rem (31.25 → 54px) Step 4: 2.441rem → 4.5rem (39 → 72px) */ --text-xs: clamp(0.64rem, 0.62rem + 0.09vw, 0.64rem); --text-sm: clamp(0.80rem, 0.75rem + 0.23vw, 0.875rem); --text-base: clamp(1.00rem, 0.93rem + 0.34vw, 1.125rem); --text-lg: clamp(1.25rem, 1.11rem + 0.68vw, 1.5rem); --text-xl: clamp(1.563rem, 1.17rem + 1.88vw, 2.25rem); --text-2xl: clamp(1.953rem, 1.20rem + 3.61vw, 3.375rem); --text-3xl: clamp(2.441rem, 1.30rem + 5.47vw, 4.5rem); /* Ghost-specific large stat text */ --ghost-text-lg: clamp(3rem, 1.5rem + 7.5vw, 6rem); /* Line heights — unitless for composability */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; /* body default */ --leading-relaxed: 1.625; --leading-loose: 1.8; /* Weights */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; /* Measure (line length) — optimal 45–75ch */ --measure-narrow: 45ch; --measure-default: 65ch; /* body text sweet spot */ --measure-wide: 80ch; /* ==================== SPACING ==================== Base: 1rem = 16px Scale: powers of 2 with half-steps Each step ×2 from previous full step: 2xs=4 xs=8 sm=12 base=16 md=24 lg=32 xl=48 2xl=64 3xl=96 */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-base: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* Fluid gutters — scale with viewport */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem); --gutter-sm: clamp(0.5rem, 0.25rem + 1.25vw, 1.5rem); /* ==================== LAYOUT ==================== Content widths based on measure + gutter math */ --section-max-width: min(900px, 100% - var(--gutter) * 2); --section-wide-width: min(1200px, 100% - var(--gutter) * 2); /* Grid gaps */ --grid-gap: var(--space-md); --grid-gap-sm: var(--space-base); --grid-gap-lg: var(--space-xl); /* ==================== BORDERS & RADII ==================== */ --border-platform: 2px solid var(--platform-concrete); --border-signal: 3px solid var(--signal-red); --border-rail: 4px double var(--rail-blue); --radius-none: 0; --radius-sm: 2px; --radius-base: 4px; --radius-lg: 8px; /* ==================== ELEVATION ==================== */ --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.1); --shadow-base: 4px 4px 0 rgba(0, 0, 0, 0.15); --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.2); --shadow-platform: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-inset: inset 2px 2px 4px rgba(0, 0, 0, 0.1); --shadow-polaroid: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5) inset; /* ==================== MOTION ==================== */ --ease-platform: cubic-bezier(0.4, 0, 0.2, 1); /* standard */ --ease-signal: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate */ --ease-train: cubic-bezier(0.65, 0, 0.35, 1); /* arrival */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-crawl: 1000ms; /* ==================== CRT MODE TOKENS ==================== */ --crt-scanline-opacity: 0.15; --crt-flicker-amount: 0.98; --crt-rgb-offset: 2px; --crt-glow: 0 0 10px rgba(0, 255, 128, 0.3); /* ==================== COMPONENT TOKENS ==================== */ --act-divider-height: 4px; --button-size: 88px; --button-height: 31px; --flip-duration: 0.6s; --flip-stagger: 0.1s; --noise-opacity: 0.03; } /* ==================== THEME: CRT TERMINAL ==================== */ [data-theme="crt"] { --text-primary: #00FF80; --text-secondary: #00CC66; --text-tertiary: #008844; --surface-paper: var(--surface-crt); --border-platform: 2px solid #00FF80; } /* ==================== THEME: PAPER TIMETABLE (default) ==================== */ [data-theme="paper"] { /* Uses root values */ } /* ==================== ACCESSIBILITY ==================== */ @media (prefers-contrast: more) { :root { --text-primary: #000000; --text-secondary: #1A1A1A; --border-platform: 3px solid #000000; --shadow-sm: none; --shadow-base: none; --shadow-lg: none; } } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-crawl: 0ms; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --surface-paper: #1A1A1A; --text-primary: #E8E6E3; --text-secondary: #B8B6B3; --text-tertiary: #888683; } }