. - Tap targets ≥ 44px are guaranteed by layout.css via --tap-target. ========================================================================== */ :root { /* ========================================================================== COLOR SYSTEM — dark night-sky scale Contrast ratios (WCAG AA, computed from relative luminance): body text needs ≥ 4.5:1, large text ≥ 3:1, UI boundaries ≥ 3:1. ========================================================================== */ /* Backgrounds — deep navy, darkest → lightest */ --bg-0: #0a0e1a; /* page base, deepest night sky */ --bg-1: #10162a; /* alternating section background */ --bg-2: #161f38; /* card / surface background */ /* Text */ --text-primary: #e9eef8; /* 16.5:1 on --bg-0 · 14.0:1 on --bg-2 */ --text-muted: #a9b4cd; /* 9.3:1 on --bg-0 · 7.8:1 on --bg-2 */ --text-faint: #7c88a6; /* 5.4:1 on --bg-0 · 4.6:1 on --bg-2 (small captions) */ /* Accent — GOLD, deliberately. Rationale: against deep navy, gold reads as starlight and Mediterranean warmth (trust, premium-but-simple). Teal would melt into the sea/blue palette and read as generic tech. Gold also gives the strongest AA contrast on dark navy AND supports dark-ink buttons. */ --accent: #e8b84b; /* 10.4:1 on --bg-0 · 8.8:1 on --bg-2 */ --accent-hover: #f0c96a; /* 12.2:1 on --bg-0 (hover/active) */ --accent-text: #e8b84b; /* accent-colored TEXT on dark surfaces (10.4:1) */ --accent-ink: #1c1608; /* dark text ON gold buttons · 9.8:1 vs --accent */ --accent-muted: #9c7c33; /* 4.9:1 on --bg-0 — decorative/large accents only */ /* Borders */ --border: #2a3554; /* 1.6:1 — decorative separators ONLY, never a control boundary */ --border-strong: #5a6ea8; /* 3.9:1 on --bg-0 — interactive element boundaries (WCAG 1.4.11 ≥ 3:1) */ /* Focus ring — gold, ≥ 2px, offset, AA against dark bg (10.4:1) */ --focus-ring-color: var(--accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* ========================================================================== TYPOGRAPHY — system fonts only (no webfonts, zero requests) Display: Georgia serif = editorial, calm, premium. Body: system sans = crisp on all devices. Mono: small technical labels ("eyebrows", badges). ========================================================================== */ --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; /* Sizes + line-heights (paired tokens) */ --text-xs: 0.75rem; --leading-xs: 1.4; /* 12px — captions, legal */ --text-sm: 0.875rem; --leading-sm: 1.5; /* 14px — secondary text */ --text-base: 1rem; --leading-base: 1.6; /* 16px — body */ --text-lg: 1.125rem; --leading-lg: 1.55; /* 18px — lead paragraphs */ --text-xl: 1.375rem; --leading-xl: 1.4; /* 22px — card titles */ --text-2xl: 1.75rem; --leading-2xl: 1.3; /* 28px — section headings */ --text-3xl: 2.25rem; --leading-3xl: 1.2; /* 36px — hero sub-heading */ --text-4xl: 3rem; --leading-4xl: 1.1; /* 48px — hero display */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-tight: -0.02em; /* display headings */ --tracking-wide: 0.08em; /* eyebrows / small caps labels */ /* ========================================================================== SPACING — 4px base scale ========================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px — large section gaps */ /* Layout helpers */ --container: 72rem; /* 1152px — page max-width */ --container-narrow: 48rem; /* 768px — prose / text columns */ --tap-target: 44px; /* minimum touch target (WCAG 2.5.5) */ /* ========================================================================== RADII ========================================================================== */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* ========================================================================== SHADOWS — subtle, dark-theme appropriate (deep navy shadows, not grey) ========================================================================== */ --shadow-sm: 0 1px 2px rgba(2, 6, 18, 0.4); --shadow-md: 0 4px 16px rgba(2, 6, 18, 0.45); --shadow-lg: 0 12px 40px rgba(2, 6, 18, 0.55); --shadow-glow: 0 0 24px rgba(232, 184, 75, 0.18); /* subtle gold glow for accent */ /* ========================================================================== MOTION Policy: decorative motion is a garnish, never a necessity. All animation and transition is disabled under prefers-reduced-motion (global block at the bottom of this file + a dedicated block in css/stars.css). Static states must always look complete without any animation. ========================================================================== */ --duration-fast: 120ms; --duration-base: 240ms; --duration-slow: 480ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* gentle deceleration */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric, calm */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle pop for reveals */ } /* ========================================================================== LIGHT THEME — prepared via [data-theme="light"] on . NO theme switcher is built; this block is inert unless the attribute is added manually. Dark remains the default and the primary experience. ========================================================================== */ [data-theme="light"] { --bg-0: #f6f3ec; /* warm limestone white */ --bg-1: #efece2; --bg-2: #ffffff; /* cards */ --text-primary: #1b2436; /* 14.0:1 on --bg-0 */ --text-muted: #4c5a75; /* 6.3:1 on --bg-0 */ --text-faint: #5f6c85; /* 4.8:1 on --bg-0 */ --accent: #e8b84b; /* gold buttons stay gold */ --accent-hover: #f0c96a; --accent-text: #7a5c10; /* 5.6:1 on --bg-0 — accent text on light */ --accent-ink: #1c1608; /* 9.8:1 vs --accent */ --accent-muted: #b08a3a; --border: #d8d2c4; /* decorative separators */ --border-strong: #8a7a55; /* 3.8:1 on --bg-0 — interactive boundaries */ --focus-ring-color: #1b2436; /* dark ring on light (14.0:1) */ --shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.1); --shadow-md: 0 4px 16px rgba(60, 50, 30, 0.12); --shadow-lg: 0 12px 40px rgba(60, 50, 30, 0.16); --shadow-glow: 0 0 24px rgba(232, 184, 75, 0.35); } /* ========================================================================== GLOBAL REDUCED-MOTION POLICY Kills all animation/transition site-wide. Static states are designed to look complete without motion, so nothing is lost. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }