/* LAYER 2 — SEMANTIC TOKENS per theme * 5 themes, OKLCH color space (baseline Aug 2025) * Switch via [data-theme="..."] on */ /* Default (same as Noir) for no-JS users before inline script runs */ :root { color-scheme: dark; } /* ============================================================ THEME 1 — NOIR CINEMA (default) Gold-on-black · film noir · cinematic hero ============================================================ */ [data-theme="noir"] { color-scheme: dark; /* Surfaces */ --bg: oklch(0.06 0.010 60); --bg-elevated: oklch(0.10 0.015 60); --bg-card: oklch(0.13 0.020 60); --bg-card-alt: oklch(0.16 0.025 60); --bg-overlay: oklch(0 0 0 / 0.7); /* Text */ --text: oklch(0.95 0.010 80); --text-muted: oklch(0.70 0.020 70); --text-dim: oklch(0.52 0.025 70); --text-inverse: oklch(0.06 0.010 60); /* Accent (gold) */ --accent: oklch(0.78 0.140 85); --accent-hover: oklch(0.85 0.160 85); --accent-muted: oklch(0.55 0.100 85); --accent-contrast: oklch(0.06 0.010 60); /* Secondary (oxblood) */ --secondary: oklch(0.42 0.120 20); /* Borders */ --border: oklch(0.22 0.020 60); --border-strong: oklch(0.32 0.030 60); --border-accent: oklch(0.78 0.140 85 / 0.4); /* Status */ --success: oklch(0.70 0.140 145); --warning: oklch(0.78 0.150 75); --danger: oklch(0.63 0.200 25); /* Focus */ --focus-ring: oklch(0.78 0.140 85); /* Gradients */ --gradient-hero: radial-gradient(ellipse at top left, oklch(0.78 0.140 85 / 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, oklch(0.42 0.120 20 / 0.12) 0%, transparent 50%), var(--bg); --gradient-accent: linear-gradient(135deg, oklch(0.78 0.140 85) 0%, oklch(0.55 0.100 85) 100%); /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: 'Limelight', serif; --font-mono: 'JetBrains Mono', var(--font-sys-mono); /* Component shapes */ --radius-button: 4px; --radius-card: 8px; --radius-modal: 12px; /* Shadows */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 4px 12px oklch(0 0 0 / 0.5); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.6); --shadow-accent: 0 0 40px oklch(0.78 0.140 85 / 0.25); /* Grain */ --grain-opacity: 0.04; } /* ============================================================ THEME 2 — SPEAKEASY v2 (Graphite Leather Metal Gold) — DEFAULT Gentleman's club, not horror film. Cool/warm/cool/warm: gunmetal walls + warm leather banquettes + brushed metal + gold. Background lifts L=0.08 → L=0.18: readable, inviting, signature. ============================================================ */ [data-theme="speakeasy"] { color-scheme: dark; /* Surfaces — cool graphite shells, warm leather cards */ --bg: oklch(0.18 0.012 250); /* gunmetal graphite */ --bg-elevated: oklch(0.22 0.014 250); --bg-card: oklch(0.26 0.018 50); /* warm leather cognac */ --bg-card-alt: oklch(0.32 0.022 50); --bg-overlay: oklch(0.10 0.010 250 / 0.78); /* Text — warm cream against cool graphite */ --text: oklch(0.96 0.012 80); --text-muted: oklch(0.72 0.020 70); --text-dim: oklch(0.65 0.025 65); /* bumped from 0.52 → 0.65 for AA contrast on bg-elevated (footer) */ --text-inverse: oklch(0.18 0.012 250); /* Accent — polished antique gold */ --accent: oklch(0.78 0.130 78); --accent-hover: oklch(0.85 0.150 78); --accent-muted: oklch(0.55 0.090 78); --accent-contrast: oklch(0.18 0.012 250); /* Secondary — oxblood leather (rare use, hero only) */ --secondary: oklch(0.40 0.140 25); /* Borders — warm leather tint (matches card temperature, not cool grey) */ --border: oklch(0.36 0.022 55); --border-strong: oklch(0.46 0.025 55); --border-accent: oklch(0.78 0.130 78 / 0.45); /* Status */ --success: oklch(0.66 0.120 140); --warning: oklch(0.78 0.140 70); --danger: oklch(0.62 0.180 25); /* Focus */ --focus-ring: oklch(0.78 0.130 78); /* Gradients — graphite-to-leather depth */ --gradient-hero: radial-gradient(ellipse at top left, oklch(0.78 0.130 78 / 0.10) 0%, transparent 55%), radial-gradient(ellipse at bottom right, oklch(0.40 0.140 25 / 0.14) 0%, transparent 55%), linear-gradient(180deg, oklch(0.16 0.012 250) 0%, oklch(0.20 0.014 250) 100%); --gradient-accent: linear-gradient(135deg, oklch(0.82 0.140 78) 0%, oklch(0.55 0.095 65) 100%); /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: 'Limelight', serif; --font-mono: 'JetBrains Mono', var(--font-sys-mono); /* Component shapes — modern softer radii (Apple-Liquid-Glass-adjacent) */ --radius-button: 10px; --radius-card: 18px; --radius-modal: 24px; /* Shadows — soften for new luminosity */ --shadow-sm: 0 1px 2px oklch(0.10 0 0 / 0.40); --shadow-md: 0 4px 16px oklch(0.10 0 0 / 0.48); --shadow-lg: 0 16px 40px oklch(0.10 0 0 / 0.55); --shadow-accent: 0 0 40px oklch(0.78 0.130 78 / 0.20); /* Grain — reduced for graphite (less needs hiding) */ --grain-opacity: 0.04; } /* ============================================================ THEME 3 — RAZOR'S EDGE (brutalist) B/W · gold accent · oversized type · 2px rules · zero radius ============================================================ */ [data-theme="razor"] { color-scheme: light; --bg: oklch(0.99 0 0); --bg-elevated: oklch(0.96 0 0); --bg-card: oklch(0.93 0 0); --bg-card-alt: oklch(0.09 0 0); /* inverse */ --bg-overlay: oklch(0 0 0 / 0.85); --text: oklch(0.10 0 0); --text-muted: oklch(0.32 0 0); --text-dim: oklch(0.52 0 0); --text-inverse: oklch(0.99 0 0); --accent: oklch(0.68 0.150 75); /* brass */ --accent-hover: oklch(0.60 0.180 65); --accent-muted: oklch(0.75 0.100 75); --accent-contrast: oklch(0.99 0 0); --secondary: oklch(0.09 0 0); --border: oklch(0.10 0 0); --border-strong: oklch(0 0 0); --border-accent: oklch(0.68 0.150 75); --success: oklch(0.55 0.160 140); --warning: oklch(0.70 0.180 75); --danger: oklch(0.55 0.220 25); --focus-ring: oklch(0.68 0.150 75); --gradient-hero: var(--bg); --gradient-accent: oklch(0.68 0.150 75); --font-display: 'Archivo Black', 'Neue Haas Grotesk', Impact, sans-serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: Georgia, 'Times New Roman', serif; /* tension serif */ --font-mono: 'JetBrains Mono', var(--font-sys-mono); --radius-button: 0; --radius-card: 0; --radius-modal: 0; --shadow-sm: 2px 2px 0 oklch(0 0 0); --shadow-md: 4px 4px 0 oklch(0 0 0); --shadow-lg: 8px 8px 0 oklch(0 0 0); --shadow-accent: 4px 4px 0 oklch(0.68 0.150 75); --grain-opacity: 0; } /* ============================================================ THEME 4 — WHITE LINEN (indie light) Cream · cognac terracotta · sunday morning · handcrafted ============================================================ */ [data-theme="linen"] { color-scheme: light; --bg: oklch(0.97 0.015 80); --bg-elevated: oklch(0.99 0.010 80); --bg-card: oklch(1.00 0 0); --bg-card-alt: oklch(0.95 0.020 75); --bg-overlay: oklch(0.20 0.020 60 / 0.55); --text: oklch(0.20 0.030 55); --text-muted: oklch(0.42 0.030 60); --text-dim: oklch(0.62 0.030 65); --text-inverse: oklch(0.99 0.010 80); --accent: oklch(0.58 0.140 45); /* cognac terracotta */ --accent-hover: oklch(0.52 0.160 40); --accent-muted: oklch(0.70 0.080 45); --accent-contrast: oklch(0.99 0.010 80); --secondary: oklch(0.38 0.100 150); /* sage */ --border: oklch(0.82 0.025 75); --border-strong: oklch(0.65 0.035 70); --border-accent: oklch(0.58 0.140 45 / 0.4); --success: oklch(0.48 0.130 145); --warning: oklch(0.70 0.160 70); --danger: oklch(0.55 0.220 25); --focus-ring: oklch(0.58 0.140 45); --gradient-hero: radial-gradient(ellipse at top right, oklch(0.58 0.140 45 / 0.10) 0%, transparent 60%), radial-gradient(ellipse at bottom left, oklch(0.85 0.035 90 / 0.30) 0%, transparent 50%), var(--bg); --gradient-accent: linear-gradient(135deg, oklch(0.58 0.140 45) 0%, oklch(0.45 0.120 35) 100%); --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: 'Caveat', 'Kalam', cursive; --font-mono: 'JetBrains Mono', var(--font-sys-mono); --radius-button: 8px; --radius-card: 16px; --radius-modal: 20px; --shadow-sm: 0 1px 3px oklch(0.20 0.030 55 / 0.06); --shadow-md: 0 8px 24px oklch(0.20 0.030 55 / 0.10); --shadow-lg: 0 20px 48px oklch(0.20 0.030 55 / 0.14); --shadow-accent: 0 8px 24px oklch(0.58 0.140 45 / 0.22); --grain-opacity: 0.03; } /* ============================================================ THEME 5 — WARM EDITORIAL (remix: Linear + Claude) Modern professional · terracotta on white · dual-mode ============================================================ */ [data-theme="editorial"] { color-scheme: light; --bg: oklch(1.00 0 0); --bg-elevated: oklch(0.985 0 0); --bg-card: oklch(0.975 0 0); --bg-card-alt: oklch(0.12 0.010 60); /* inverse */ --bg-overlay: oklch(0.15 0.015 60 / 0.55); --text: oklch(0.15 0.010 265); --text-muted: oklch(0.42 0.015 265); --text-dim: oklch(0.58 0.015 265); --text-inverse: oklch(1.00 0 0); --accent: oklch(0.58 0.150 40); /* claude terracotta */ --accent-hover: oklch(0.52 0.170 35); --accent-muted: oklch(0.72 0.095 45); --accent-contrast: oklch(1.00 0 0); --secondary: oklch(0.55 0.180 260); /* purple */ --border: oklch(0.90 0.005 265); --border-strong: oklch(0.78 0.010 265); --border-accent: oklch(0.58 0.150 40 / 0.35); --success: oklch(0.55 0.150 145); --warning: oklch(0.68 0.170 75); --danger: oklch(0.55 0.220 25); --focus-ring: oklch(0.58 0.150 40); --gradient-hero: radial-gradient(ellipse at top right, oklch(0.58 0.150 40 / 0.05) 0%, transparent 70%), var(--bg); --gradient-accent: linear-gradient(135deg, oklch(0.58 0.150 40) 0%, oklch(0.48 0.160 25) 100%); --font-display: 'Fraunces', 'Tiempos Headline', 'Playfair Display', Georgia, serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: 'Inter', var(--font-sys-sans); --font-mono: 'JetBrains Mono', var(--font-sys-mono); --radius-button: 6px; --radius-card: 8px; --radius-modal: 12px; --shadow-sm: 0 1px 2px oklch(0.15 0.010 265 / 0.04); --shadow-md: 0 4px 12px oklch(0.15 0.010 265 / 0.06); --shadow-lg: 0 20px 48px oklch(0.15 0.010 265 / 0.10); --shadow-accent: 0 4px 16px oklch(0.58 0.150 40 / 0.20); --grain-opacity: 0; } /* ============================================================ THEME 6 — ESPRESSO (Brooklyn cinema · antique brass · A24 noir) Warm near-black + ivory + burnished bronze. The default for the public mobile-first build. Photo-loop hero lives here. ============================================================ */ [data-theme="espresso"] { color-scheme: dark; /* Surfaces — espresso warm-near-black */ --bg: oklch(0.05 0.006 50); /* #0A0807 espresso */ --bg-elevated: oklch(0.10 0.010 50); /* #16100C ink */ --bg-card: oklch(0.16 0.018 50); /* warm leather card */ --bg-card-alt: oklch(0.20 0.022 50); --bg-overlay: oklch(0.04 0.005 50 / 0.85); /* Text — warm ivory */ --text: oklch(0.94 0.025 85); /* #F5EDD7 */ --text-muted: oklch(0.78 0.020 75); /* #C2B8A3 ish */ --text-dim: oklch(0.62 0.018 65); /* #9A8B73 taupe */ --text-inverse: oklch(0.10 0.010 50); /* Accent — burnished antique brass (NOT lemon-gold) */ --accent: oklch(0.66 0.082 60); /* #B58659 brass-light */ --accent-hover: oklch(0.72 0.092 62); --accent-muted: oklch(0.49 0.085 55); /* #8E6536 brass-mid */ --accent-contrast: oklch(0.10 0.010 40); /* #1A1208 dark espresso text on brass */ /* Brass gradient stops — for button + signature elements */ --brass-light: oklch(0.66 0.082 60); /* #B58659 */ --brass-mid: oklch(0.49 0.085 55); /* #8E6536 */ --brass-dark: oklch(0.32 0.060 55); /* #5C3E1A */ --brass-edge: oklch(0.22 0.040 50); /* dark hairline border */ /* Highlight (amber, rare hero use) */ --highlight: oklch(0.78 0.130 75); /* gold-l for «emphasis» words */ /* Secondary — coral copper (very sparing, never as bg fill) */ --secondary: oklch(0.62 0.150 35); /* Borders */ --border: oklch(0.20 0.012 50); --border-strong: oklch(0.30 0.018 50); --border-accent: oklch(0.66 0.082 60 / 0.40); /* Status */ --success: oklch(0.66 0.120 140); --warning: oklch(0.74 0.140 75); --danger: oklch(0.62 0.180 25); /* Focus */ --focus-ring: oklch(0.66 0.082 60); /* Gradients */ --gradient-hero: radial-gradient(ellipse at top, oklch(0.66 0.082 60 / 0.06) 0%, transparent 60%), radial-gradient(ellipse at bottom, oklch(0.62 0.150 35 / 0.04) 0%, transparent 70%), var(--bg); --gradient-accent: linear-gradient(180deg, var(--brass-light) 0%, var(--brass-mid) 48%, var(--brass-dark) 100%); /* Hero scrim — top + bottom dark fade with photo-breathing middle */ --scrim-top: linear-gradient(180deg, oklch(0.05 0.005 50 / 0.92) 0%, oklch(0.05 0.005 50 / 0.65) 30%, oklch(0.05 0.005 50 / 0.20) 70%, oklch(0.05 0.005 50 / 0) 100%); --scrim-bot: linear-gradient(180deg, oklch(0.05 0.005 50 / 0) 0%, oklch(0.05 0.005 50 / 0) 38%, oklch(0.05 0.005 50 / 0.85) 65%, oklch(0.05 0.005 50 / 1) 100%); /* Typography */ --font-display: 'Lora', 'Playfair Display', Georgia, serif; --font-body: 'Inter', var(--font-sys-sans); --font-accent: 'JetBrains Mono', var(--font-sys-mono); --font-mono: 'JetBrains Mono', var(--font-sys-mono); /* Component shapes */ --radius-button: 999px; /* pills */ --radius-card: 16px; --radius-modal: 20px; /* Shadows */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.5); --shadow-md: 0 6px 18px oklch(0 0 0 / 0.55); --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.65); --shadow-accent: 0 14px 36px -10px oklch(0.49 0.085 55 / 0.55); /* Grain */ --grain-opacity: 0.05; } /* ============================================================ View Transitions — disable default root crossfade so custom clip-path animation in JS takes over cleanly. ============================================================ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* ============================================================ Auto-inherit system preference before JS runs (fallback — inline head script sets data-theme first) ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: oklch(0.06 0.010 60); --bg-elevated: oklch(0.10 0.015 60); --text: oklch(0.95 0.010 80); --accent: oklch(0.78 0.140 85); } }