/* ============================================================================ CLAUDE DESIGN LANGUAGE — tokens.css The single source of truth. Primitives + semantic tokens + 8 named themes. Components reference ONLY semantic tokens, so re-theming = swap one block. Set a direction with (etc). Default = atelier. ============================================================================ */ :root { /* ---- Spacing — 4px base, hand-tuned ramp ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --space-4xl: 12rem; /* Fluid spacing (Utopia method) — scales 320 -> 1440 with no media queries */ --space-s-fluid: clamp(1rem, 0.91rem + 0.45vw, 1.25rem); --space-m-fluid: clamp(1.5rem, 1.30rem + 1.00vw, 2rem); --space-l-fluid: clamp(2.5rem, 2.05rem + 2.25vw, 4rem); --space-xl-fluid: clamp(4rem, 3.10rem + 4.50vw, 6rem); --space-2xl-fluid: clamp(6rem, 4.20rem + 9.00vw, 10rem); /* ---- Fluid type scale — minor third (1.2) @320 -> perfect fourth (1.333) @1240 ---- Every value mixes rem + vw so it scales with browser zoom (WCAG 1.4.4). */ --step--2: clamp(0.6944rem, 0.66rem + 0.17vw, 0.7901rem); --step--1: clamp(0.8333rem, 0.78rem + 0.27vw, 0.9377rem); --step-0: clamp(1.0000rem, 0.91rem + 0.43vw, 1.1250rem); --step-1: clamp(1.2000rem, 1.07rem + 0.65vw, 1.4994rem); --step-2: clamp(1.4400rem, 1.25rem + 0.95vw, 1.9988rem); --step-3: clamp(1.7280rem, 1.46rem + 1.36vw, 2.6644rem); --step-4: clamp(2.0736rem, 1.69rem + 1.92vw, 3.5519rem); --step-5: clamp(2.4883rem, 1.96rem + 2.66vw, 4.7352rem); --step-6: clamp(2.9860rem, 2.25rem + 3.66vw, 6.3119rem); --step-7: clamp(3.5832rem, 2.56rem + 5.00vw, 8.4153rem); /* ---- Line heights ---- */ --leading-display: 0.95; --leading-heading: 1.1; --leading-snug: 1.25; --leading-body: 1.6; --leading-loose: 1.75; /* ---- Measure (line length) ---- */ --measure: 68ch; --measure-narrow: 44ch; /* ---- Tracking ---- */ --tracking-display: -0.02em; --tracking-heading: -0.011em; --tracking-body: 0em; --tracking-caps: 0.08em; /* ---- Canvas grid tracks ---- */ --bleed: var(--space-l-fluid); --content: min(var(--measure), 100% - var(--bleed) * 2); --popout: minmax(0, 6rem); --feature: minmax(0, 12rem); --page-max: 1280px; /* ---- Radius (themes override) ---- */ --radius: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---- Components ---- */ --btn-pad: 0.72em 1.4em; /* ---- Motion ---- */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-slower: 520ms; --dur-page: 640ms; --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Z-index ---- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; /* ---- Fonts (defaults; themes override) ---- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-heading: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- OpenType ---- */ --feat-body: "kern" 1, "liga" 1, "clig" 1, "calt" 1; } /* ============================================================================ THEMES — each is a complete "direction": color + type + radius + dial. ============================================================================ */ /* 1 — ATELIER · warm editorial · artists, founders, writers · DEFAULT --------- */ :root, [data-theme="atelier"] { --bg: #FAF7F2; --surface: #FFFFFF; --surface-2: #F2EDE4; --text: #14110F; --muted: #615A50; --subtle: #8A8076; --border: #E7E0D5; --border-strong: #D8CFC0; --ring: #7C2D12; --accent: #7C2D12; --accent-hover: #67240F; --accent-contrast: #FAF7F2; --accent-2: #1B4332; --success: #2F5D3A; --warning: #92580F; --danger: #9F1239; --shadow-color: 28deg 25% 18%; --font-display: "Fraunces", Georgia, serif; --font-heading: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Newsreader", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, Menlo, monospace; --radius: 4px; --radius-lg: 8px; --dial: editorial; } [data-theme="atelier"][data-mode="dark"] { --bg: #14110F; --surface: #1F1A16; --surface-2: #261F1A; --text: #E7E2D9; --muted: #B0A99E; --subtle: #877F74; --border: #2C2620; --border-strong: #3A332B; --ring: #C98A5E; --accent: #D08A5C; --accent-hover: #C2794A; --accent-contrast: #14110F; --accent-2: #7A8B7A; --shadow-color: 0deg 0% 0%; } /* 2 — SIGNAL · technical / credible · deep-tech, B2B, ventures ---------------- */ [data-theme="signal"] { --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #ECEFF3; --text: #14141A; --muted: #52606D; --subtle: #7A8794; --border: #DEE3E8; --border-strong: #C8D0D8; --ring: #3A4D7A; --accent: #3A4D7A; --accent-hover: #2E3E63; --accent-contrast: #FFFFFF; --accent-2: #0E7490; --success: #0F766E; --warning: #92580F; --danger: #B42318; --shadow-color: 220deg 30% 25%; --font-display: "Space Grotesk", system-ui, sans-serif; --font-heading: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; --font-sans: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, Menlo, monospace; --radius: 4px; --radius-lg: 8px; --dial: interactive; } [data-theme="signal"][data-mode="dark"] { --bg: #0F1115; --surface: #171A21; --surface-2: #20242E; --text: #E6E8EC; --muted: #9BA3AF; --subtle: #6B7280; --border: #232833; --border-strong: #333A47; --ring: #5B8DEF; --accent: #5B8DEF; --accent-hover: #719EF3; --accent-contrast: #0F1115; --accent-2: #2DD4BF; --shadow-color: 0deg 0% 0%; } /* 3 — VITRINE · gallery white-cube · photographers, visual artists ------------ */ [data-theme="vitrine"] { --bg: #FCFBF8; --surface: #FFFFFF; --surface-2: #F4F4F1; --text: #0E0E10; --muted: #5C5C5C; --subtle: #8A8A8A; --border: #E8E8E6; --border-strong: #D6D6D3; --ring: #B91C1C; --accent: #B91C1C; --accent-hover: #991414; --accent-contrast: #FFFFFF; --accent-2: #0E0E10; --success: #2F5D3A; --warning: #92580F; --danger: #B91C1C; --shadow-color: 0deg 0% 10%; --font-display: "Schibsted Grotesk", system-ui, sans-serif; --font-heading: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --radius: 0px; --radius-lg: 0px; --dial: stoic; } /* 4 — NOCTURNE · dark luxury · hospitality, events, premium · DARK-FIRST ------ */ [data-theme="nocturne"] { --bg: #14110F; --surface: #1F1A16; --surface-2: #2A231D; --text: #E7E2D9; --muted: #B0A99E; --subtle: #877F74; --border: #2C2620; --border-strong: #3C342B; --ring: #A87D32; --accent: #A87D32; --accent-hover: #C0934A; --accent-contrast: #14110F; --accent-2: #7A8B7A; --success: #6E8B6E; --warning: #B08530; --danger: #C46A6A; --shadow-color: 0deg 0% 0%; --font-display: "Instrument Serif", Georgia, serif; --font-heading: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --radius: 0px; --radius-lg: 2px; --dial: stoic; } /* 5 — PRESS · gray studio · sans-only, one light-pop accent · digital glass --- Range of neutral grays; the ONLY chroma is light through glass (prism, hero name, mixer — the spectral.css RGB, kept). Display/body are Public Sans so the additive light reads on fat glyphs; labels stay IBM Plex Mono. */ [data-theme="press"] { --bg: #ECEBE8; --surface: #F5F4F1; --surface-2: #E1E0DC; --text: #1A1A18; --muted: #5E5E57; --subtle: #8A8A82; --border: #DAD9D3; --border-strong: #C5C4BD; --ring: #1A5FD0; --accent: #1A5FD0; --accent-hover: #144CAD; --accent-contrast: #FFFFFF; --accent-2: #144CAD; --success: #2F5D3A; --warning: #92580F; --danger: #B4341C; --shadow-color: 220deg 8% 28%; --font-display: "Public Sans", system-ui, -apple-system, sans-serif; --font-heading: "Public Sans", system-ui, -apple-system, sans-serif; --font-body: "Public Sans", system-ui, -apple-system, sans-serif; --font-sans: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 0px; --radius-lg: 2px; --dial: stoic; } /* 6 — TERRA · botanical · wellness, food, education, sustainability ----------- */ [data-theme="terra"] { --bg: #F3F5EF; --surface: #FBFCF9; --surface-2: #E7ECE0; --text: #1B2419; --muted: #54614E; --subtle: #7C8676; --border: #DDE3D6; --border-strong: #C7D0BC; --ring: #2F5D3A; --accent: #2F5D3A; --accent-hover: #244A2D; --accent-contrast: #F3F5EF; --accent-2: #B45309; --success: #2F5D3A; --warning: #B45309; --danger: #9F1239; --shadow-color: 130deg 15% 18%; --font-display: "Spectral", Georgia, serif; --font-heading: "Spectral", Georgia, serif; --font-body: "Public Sans", system-ui, sans-serif; --font-sans: "Public Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 8px; --radius-lg: 14px; --dial: editorial; } /* 7 — BRUT · raw / brutalist · music, statement portfolios, bold brands ------- */ [data-theme="brut"] { --bg: #EDEBE3; --surface: #FFFFFF; --surface-2: #E2DFD6; --text: #15140F; --muted: #4A4843; --subtle: #76736B; --border: #15140F; --border-strong: #15140F; --ring: #E5481D; --accent: #E5481D; --accent-hover: #C53C16; --accent-contrast: #FFFFFF; --accent-2: #15140F; --success: #1F6F43; --warning: #B45309; --danger: #C5221F; --shadow-color: 0deg 0% 0%; --shadow-hard: 5px 5px 0 0 var(--text); --font-display: "Space Mono", ui-monospace, monospace; --font-heading: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; --font-sans: "Space Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --radius: 0px; --radius-lg: 0px; --dial: interactive; } /* 8 — STUDIO · creative studio / interactive · agencies, launches ------------- */ [data-theme="studio"] { --bg: #F7F4EF; --surface: #FFFFFF; --surface-2: #ECE6DD; --text: #17120E; --muted: #5C544A; --subtle: #877E72; --border: #E6DFD4; --border-strong: #D4C9BA; --ring: #6E1423; --accent: #6E1423; --accent-hover: #54101B; --accent-contrast: #F7F4EF; --accent-2: #1C1917; --success: #2F5D3A; --warning: #B45309; --danger: #9F1239; --shadow-color: 18deg 22% 20%; --font-display: "Clash Display", "Bricolage Grotesque", system-ui, sans-serif; --font-heading: "General Sans", system-ui, sans-serif; --font-body: "General Sans", system-ui, sans-serif; --font-sans: "General Sans", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --radius: 6px; --radius-lg: 16px; --dial: interactive; } /* 9 — CONSOLE · dark technical product · dashboards, dev tools · DARK-FIRST --- */ [data-theme="console"] { --bg: #0F1115; --surface: #171A21; --surface-2: #20242E; --text: #E6E8EC; --muted: #9BA3AF; --subtle: #6B7280; --border: #232833; --border-strong: #333A47; --ring: #5B8DEF; --accent: #5B8DEF; --accent-hover: #719EF3; --accent-contrast: #0F1115; --accent-2: #2DD4BF; --success: #2DD4BF; --warning: #E0A33E; --danger: #F08A8A; --shadow-color: 0deg 0% 0%; --font-display: "Geist", system-ui, sans-serif; --font-heading: "Geist", system-ui, sans-serif; --font-body: "Geist", system-ui, sans-serif; --font-sans: "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, Menlo, monospace; --radius: 6px; --radius-lg: 10px; --dial: interactive; } /* 10 — FORUM · civic / institutional · government, nonprofit, university ------ */ [data-theme="forum"] { --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #E8EAEE; --text: #15171C; --muted: #50565F; --subtle: #7C828B; --border: #DCDFE4; --border-strong: #C4C8CF; --ring: #25405C; --accent: #25405C; --accent-hover: #1C3148; --accent-contrast: #FFFFFF; --accent-2: #7A1F2B; --success: #1F6F54; --warning: #8A5A0F; --danger: #9B2C2C; --shadow-color: 215deg 15% 22%; --font-display: "Source Serif 4", Georgia, serif; --font-heading: "Public Sans", system-ui, sans-serif; --font-body: "Source Serif 4", Georgia, serif; --font-sans: "Public Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 3px; --radius-lg: 6px; --dial: editorial; } /* 11 — HEIRLOOM · heritage luxury · law, finance, fashion houses, estates ----- */ [data-theme="heirloom"] { --bg: #F6F1E8; --surface: #FCF8F0; --surface-2: #ECE3D2; --text: #1C1A14; --muted: #5A5346; --subtle: #847B6A; --border: #E0D6C2; --border-strong: #CBBEA3; --ring: #1B4332; --accent: #1B4332; --accent-hover: #143026; --accent-contrast: #F6F1E8; --accent-2: #8A6D3B; --success: #1B4332; --warning: #8A6D3B; --danger: #6E1423; --shadow-color: 40deg 18% 20%; --font-display: "Libre Caslon Display", Georgia, serif; --font-heading: "Libre Caslon Display", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 0px; --radius-lg: 0px; --dial: stoic; } /* 12 — COUNTER · boutique commerce · retail, makers, DTC, cafes -------------- */ [data-theme="counter"] { --bg: #FBFAF7; --surface: #FFFFFF; --surface-2: #F1EEE8; --text: #181410; --muted: #5E564B; --subtle: #8A8276; --border: #E8E3D9; --border-strong: #D6CEC0; --ring: #C2410C; --accent: #C2410C; --accent-hover: #A8370A; --accent-contrast: #FFFFFF; --accent-2: #1C1917; --success: #2F5D3A; --warning: #B45309; --danger: #9F1239; --shadow-color: 25deg 18% 18%; --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-heading: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --radius: 10px; --radius-lg: 18px; --dial: editorial; }