/* * tokens.css — design tokens for the starter site (VENDORED, self-contained). * * Source of truth for values: design_system/base/tokens/* (primitives, semantic, themes). * This file vendors a generic subset on purpose — public/ IS the served web root, so a * cross-repo import that escapes the root (into design_system/) would 404 in production * and leave the whole site unstyled. Re-sync the subset by hand if the primitives change. * * Last synced: 2026-06-21 (generic starter subset — not yet mapped to a brand) * * Three layers, kept separate: * 1. Primitives — raw scale values (--color-slate-*, --space-*, --radius-*). * 2. Semantic — role aliases (--background, --foreground, --surface, --primary, ...). * 3. Site map — the per-site brand bridge (set --brand-h / --brand-s, or override * the semantic roles with exact brand hexes). * * styles.css consumes ONLY layer-2/3 semantic tokens — never a raw hex. * Dark mode overrides SEMANTIC tokens (not primitives) under prefers-color-scheme, * :root.dark, and [data-theme="dark"]; [data-theme="light"] forces light. */ :root { /* ---- 1. Primitives ----------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: clamp(3rem, 2rem + 5vw, 6rem); --space-20: clamp(3.5rem, 2.25rem + 6vw, 7.5rem); --space-24: clamp(4rem, 2.5rem + 7vw, 9rem); --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-full: 999px; /* Canonical compatibility aliases consumed by generated site recipes. */ --corner-radius-md: var(--radius-sm); --corner-radius-lg: var(--radius); --corner-radius-xl: var(--radius-lg); --corner-radius-pill: var(--radius-full); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --typography-font-family-sans: var(--font-sans); --typography-font-family-ui: var(--font-sans); --typography-font-family-body: var(--font-sans); --typography-font-family-display: var(--font-sans); --typography-font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif; /* Fluid type scale (min → max across viewport). */ --text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); --text-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); --text-3xl: clamp(2.4rem, 1.7rem + 3.4vw, 4rem); --typography-font-size-sm: var(--text-sm); --typography-font-size-xl: var(--text-xl); --typography-font-size-2xl: var(--text-2xl); --typography-font-size-3xl: var(--text-3xl); --typography-font-size-4xl: clamp(2.75rem, 2rem + 4vw, 4.75rem); --typography-font-size-5xl: clamp(3.25rem, 2.2rem + 5vw, 5.75rem); --typography-font-size-display-sm: clamp(3rem, 2rem + 5vw, 5.5rem); --typography-font-size-display-md: clamp(3.75rem, 2.25rem + 7vw, 7rem); --typography-font-size-display-lg: clamp(4.5rem, 2.5rem + 9vw, 8.5rem); --typography-font-weight-semibold: 600; --typography-font-weight-bold: 700; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.65; --tracking-tight: -0.02em; --typography-line-height-none: 1; --typography-line-height-tight: var(--leading-tight); --typography-line-height-snug: var(--leading-snug); --typography-line-height-display: 0.96; --typography-letter-spacing-tight: var(--tracking-tight); /* ---- 3. Site map (brand bridge) --------------------------------------- * Set hue + saturation once; the brand scale derives from it. Replace the * resolved --primary/--accent below with exact hexes if you have them. */ --brand-h: 222; --brand-s: 84%; /* ---- 2. Semantic tokens (light) --------------------------------------- */ --background: hsl(var(--brand-h) 20% 99%); --surface: #ffffff; --surface-2: hsl(var(--brand-h) 24% 97%); --border: hsl(var(--brand-h) 18% 90%); --foreground: hsl(var(--brand-h) 28% 14%); --foreground-muted: hsl(var(--brand-h) 12% 42%); --primary: hsl(var(--brand-h) var(--brand-s) 52%); --primary-hover: hsl(var(--brand-h) var(--brand-s) 45%); --primary-foreground: #ffffff; /* Compatibility aliases consumed by generated public-site primitives. */ --card: var(--surface); --muted: var(--surface-2); --muted-foreground: var(--foreground-muted); --accent: hsl(calc(var(--brand-h) + 140) 70% 55%); --shadow-sm: 0 1px 2px hsl(var(--brand-h) 30% 10% / 0.06); --shadow: 0 6px 24px -8px hsl(var(--brand-h) 30% 10% / 0.14); --shadow-lg: 0 20px 50px -16px hsl(var(--brand-h) 40% 12% / 0.24); --shadow-md: var(--shadow); --z-sticky: 30; --status-success: hsl(151 55% 38%); --border-subtle: var(--border); /* ---- Layout ------------------------------------------------------------ */ --container: 72rem; --container-narrow: 46rem; --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem); --transition: 180ms cubic-bezier(0.2, 0, 0, 1); } /* Dark — override SEMANTIC tokens only. OS preference, unless forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: hsl(var(--brand-h) 28% 8%); --surface: hsl(var(--brand-h) 24% 11%); --surface-2: hsl(var(--brand-h) 22% 14%); --border: hsl(var(--brand-h) 18% 22%); --foreground: hsl(var(--brand-h) 20% 95%); --foreground-muted: hsl(var(--brand-h) 12% 68%); --primary: hsl(var(--brand-h) calc(var(--brand-s) - 10%) 64%); --primary-hover: hsl(var(--brand-h) calc(var(--brand-s) - 10%) 72%); --primary-foreground: hsl(var(--brand-h) 40% 10%); --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4); --shadow: 0 6px 24px -8px hsl(0 0% 0% / 0.55); --shadow-lg: 0 20px 50px -16px hsl(0 0% 0% / 0.7); } } :root.dark, :root[data-theme="dark"] { --background: hsl(var(--brand-h) 28% 8%); --surface: hsl(var(--brand-h) 24% 11%); --surface-2: hsl(var(--brand-h) 22% 14%); --border: hsl(var(--brand-h) 18% 22%); --foreground: hsl(var(--brand-h) 20% 95%); --foreground-muted: hsl(var(--brand-h) 12% 68%); --primary: hsl(var(--brand-h) calc(var(--brand-s) - 10%) 64%); --primary-hover: hsl(var(--brand-h) calc(var(--brand-s) - 10%) 72%); --primary-foreground: hsl(var(--brand-h) 40% 10%); --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4); --shadow: 0 6px 24px -8px hsl(0 0% 0% / 0.55); --shadow-lg: 0 20px 50px -16px hsl(0 0% 0% / 0.7); }