/* ============================================================ Plumb — Design tokens (Phase 0.5) Hybrid: Tailwind-compatible scale × shadcn HSL pattern × our brand ============================================================ */ :root { /* — Brand identity (constant across themes) ———————————— */ --brand-amber-50: 22 92% 95%; --brand-amber-100: 24 91% 87%; --brand-amber-200: 26 91% 75%; --brand-amber-300: 28 89% 61%; --brand-amber-400: 26 85% 53%; --brand-amber-500: 22 84% 47%; /* primary */ --brand-amber-600: 22 88% 38%; --brand-amber-700: 22 90% 30%; --brand-steel-50: 210 50% 95%; --brand-steel-100: 210 45% 84%; --brand-steel-300: 210 38% 58%; --brand-steel-500: 210 50% 36%; --brand-steel-700: 210 55% 24%; --brand-success: 158 60% 30%; --brand-warning: 40 88% 38%; --brand-danger: 8 62% 41%; /* — Spacing scale (Tailwind-compatible, ×4px) ——————————— */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* — Radius scale (shadcn-style with one base var) —————— */ --radius: 6px; --radius-none: 0px; --radius-sm: 2px; --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: 10px; --radius-2xl: 14px; --radius-full: 9999px; /* — Type scale ——————————————————————————————— */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 64px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* font families — wired up to Tweak so user can swap */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; /* — Density (affects only control heights and paddings) — */ /* set on */ --control-h-sm: 28px; --control-h-md: 36px; --control-h-lg: 44px; --control-px-sm: 10px; --control-px-md: 14px; --control-px-lg: 18px; --gap-stack: var(--space-3); /* — Motion ——————————————————————————————————— */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; } [data-density="compact"] { --control-h-sm: 24px; --control-h-md: 30px; --control-h-lg: 38px; --control-px-sm: 8px; --control-px-md: 11px; --control-px-lg: 14px; --gap-stack: var(--space-2); } [data-density="spacious"] { --control-h-sm: 32px; --control-h-md: 42px; --control-h-lg: 52px; --control-px-sm: 12px; --control-px-md: 18px; --control-px-lg: 22px; --gap-stack: var(--space-4); } /* ============================================================ Semantic theme tokens — LIGHT ============================================================ */ :root, [data-theme="light"] { --bg: 40 38% 96%; /* paper canvas */ --bg-elevated: 0 0% 100%; /* card */ --bg-sunken: 40 30% 92%; /* paper sunken */ --bg-inverse: 35 20% 8%; /* ink */ --fg: 35 25% 9%; --fg-muted: 35 12% 38%; --fg-subtle: 35 10% 55%; --fg-inverse: 40 38% 96%; --fg-on-primary: 0 0% 100%; --border: 35 18% 84%; --border-strong:35 15% 70%; --hairline: 35 20% 88%; --ring: var(--brand-amber-500); --primary: var(--brand-amber-500); --primary-hover: var(--brand-amber-600); --primary-fg: 0 0% 100%; --secondary: 40 30% 92%; --secondary-fg: 35 25% 18%; --muted: 40 22% 90%; --muted-fg: 35 15% 42%; --accent: 40 25% 90%; --accent-fg: 35 25% 12%; --destructive: var(--brand-danger); --destructive-fg: 0 0% 100%; --success: var(--brand-success); --warning: var(--brand-warning); --info: var(--brand-steel-500); --shadow-color: 30 20% 8%; --shadow-xs: 0 1px 0 0 hsl(var(--shadow-color) / .04); --shadow-sm: 0 1px 2px -1px hsl(var(--shadow-color) / .08), 0 1px 0 0 hsl(var(--shadow-color) / .04); --shadow-md: 0 4px 8px -2px hsl(var(--shadow-color) / .08), 0 1px 0 0 hsl(var(--shadow-color) / .05); --shadow-lg: 0 12px 24px -8px hsl(var(--shadow-color) / .12), 0 2px 0 0 hsl(var(--shadow-color) / .06); --shadow-xl: 0 24px 48px -16px hsl(var(--shadow-color) / .18), 0 4px 0 0 hsl(var(--shadow-color) / .06); } /* ============================================================ Semantic theme tokens — DARK ============================================================ */ [data-theme="dark"] { --bg: 35 18% 7%; --bg-elevated: 35 14% 11%; --bg-sunken: 35 16% 5%; --bg-inverse: 40 38% 96%; --fg: 40 38% 94%; --fg-muted: 35 12% 68%; --fg-subtle: 35 10% 50%; --fg-inverse: 35 25% 9%; --fg-on-primary: 0 0% 100%; --border: 35 12% 18%; --border-strong:35 10% 28%; --hairline: 35 12% 14%; --ring: var(--brand-amber-400); --primary: var(--brand-amber-400); --primary-hover: var(--brand-amber-300); --primary-fg: 35 25% 9%; --secondary: 35 14% 14%; --secondary-fg: 40 38% 94%; --muted: 35 12% 14%; --muted-fg: 35 12% 64%; --accent: 35 12% 16%; --accent-fg: 40 38% 94%; --destructive: 8 62% 50%; --destructive-fg: 0 0% 100%; --success: 158 50% 50%; --warning: 40 80% 55%; --info: 210 60% 60%; --shadow-color: 0 0% 0%; --shadow-xs: 0 1px 0 0 hsl(var(--shadow-color) / .35); --shadow-sm: 0 1px 2px -1px hsl(var(--shadow-color) / .45), 0 1px 0 0 hsl(var(--shadow-color) / .35); --shadow-md: 0 4px 8px -2px hsl(var(--shadow-color) / .5), 0 1px 0 0 hsl(var(--shadow-color) / .4); --shadow-lg: 0 12px 24px -8px hsl(var(--shadow-color) / .55), 0 2px 0 0 hsl(var(--shadow-color) / .4); --shadow-xl: 0 24px 48px -16px hsl(var(--shadow-color) / .65), 0 4px 0 0 hsl(var(--shadow-color) / .45); } /* ============================================================ Element defaults ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: hsl(var(--fg)); background: hsl(var(--bg)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); } ::selection { background: hsl(var(--primary) / .25); color: hsl(var(--fg)); } a { color: hsl(var(--info)); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } code, kbd, samp, pre { font-family: var(--font-mono); } button { font-family: inherit; } input, textarea, select { font-family: inherit; } /* common scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: hsl(var(--fg) / .15); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: hsl(var(--fg) / .3); background-clip: content-box; border: 3px solid transparent; }