/* Pitch Hiker — Design Tokens * * Theme system: CSS variables swap via `[data-theme="light"|"dark"]` on . * No-JS default follows OS `prefers-color-scheme`. * * Brand direction: editorial warmth. Less "AI-generic dark dashboard", * more "film publication meets modern work tool". */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap"); :root { /* ── Typography ────────────────────────────────────────────────────── */ --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3.25rem; --fs-5xl: 4.75rem; --fs-6xl: 6rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.75; /* ── Spacing ──────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; /* ── Radius ────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ── Layout ───────────────────────────────────────────────────────── */ --maxw-content: 1200px; --maxw-reading: 680px; --maxw-wide: 1400px; --topbar-h: 72px; /* ── Motion ───────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 400ms; } /* ── DARK THEME (default when JS is off and OS prefers dark) ──────────── */ :root, [data-theme="dark"] { --color-bg: #141518; /* warm near-black */ --color-bg-elev: #1e2025; /* slight lift */ --color-bg-sunken: #0c0d10; --color-surface: #232529; /* card backgrounds */ --color-surface-hover: #2a2d33; --color-text: #f2efe8; /* warm off-white, not pure */ --color-text-muted: #a0a098; --color-text-subtle: #646258; --color-text-inverse: #1a1a1a; --color-border: #2f3137; /* subtle */ --color-border-strong: #44464e; --color-accent: #e4ff53; /* limen, slightly less neon */ --color-accent-hover: #edff7e; --color-accent-text: #141518; --color-accent-soft: rgba(228, 255, 83, 0.14); --color-warm: #f4c96a; /* secondary warm accent */ --color-danger: #f07575; --color-danger-bg: rgba(240, 117, 117, 0.12); --color-success: #7fdd97; --color-success-bg: rgba(127, 221, 151, 0.12); --color-info: #8fbbff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 3px rgba(228, 255, 83, 0.22); } /* ── LIGHT THEME ──────────────────────────────────────────────────────── */ [data-theme="light"] { --color-bg: #faf7f0; /* warm cream paper */ --color-bg-elev: #fffdf7; /* card paper */ --color-bg-sunken: #f0ece2; --color-surface: #ffffff; --color-surface-hover: #fcf9f1; --color-text: #1a1814; /* warm near-black ink */ --color-text-muted: #68635a; --color-text-subtle: #9a968a; --color-text-inverse: #faf7f0; --color-border: #e4dfd1; /* warm paper edge */ --color-border-strong: #c9c3b0; --color-accent: #4d5a2e; /* olive-green, editorial warmth */ --color-accent-hover: #616f3c; --color-accent-text: #fffdf7; --color-accent-soft: rgba(77, 90, 46, 0.10); --color-warm: #c48a3d; --color-danger: #b43a3a; --color-danger-bg: rgba(180, 58, 58, 0.08); --color-success: #4a7a4f; --color-success-bg: rgba(74, 122, 79, 0.08); --color-info: #3c6aa8; --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06); --shadow-md: 0 4px 16px rgba(40, 30, 10, 0.08); --shadow-lg: 0 20px 48px rgba(40, 30, 10, 0.14); --shadow-focus: 0 0 0 3px rgba(77, 90, 46, 0.20); } /* ── Follow OS preference if no explicit choice ──────────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg: #faf7f0; --color-bg-elev: #fffdf7; --color-bg-sunken: #f0ece2; --color-surface: #ffffff; --color-surface-hover: #fcf9f1; --color-text: #1a1814; --color-text-muted: #68635a; --color-text-subtle: #9a968a; --color-text-inverse: #faf7f0; --color-border: #e4dfd1; --color-border-strong: #c9c3b0; --color-accent: #4d5a2e; --color-accent-hover: #616f3c; --color-accent-text: #fffdf7; --color-accent-soft: rgba(77, 90, 46, 0.10); --color-warm: #c48a3d; --color-danger: #b43a3a; --color-danger-bg: rgba(180, 58, 58, 0.08); --color-success: #4a7a4f; --color-success-bg: rgba(74, 122, 79, 0.08); --color-info: #3c6aa8; --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06); --shadow-md: 0 4px 16px rgba(40, 30, 10, 0.08); --shadow-lg: 0 20px 48px rgba(40, 30, 10, 0.14); --shadow-focus: 0 0 0 3px rgba(77, 90, 46, 0.20); } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }