/* ============================================================================ PLUMB — design tokens Ledger green + jobsite amber. Light-first, warm dark. Rules this file encodes: · Three border tokens, zero shadow tokens (except floating layers). · Elevation = lightness step, not shadow. · No bold. Weight scale tops out at 580; size carries hierarchy. · Semantic hues locked to matched lightness so pills weigh the same. ========================================================================= */ @layer tokens, base, components, layout, page, utilities; @layer tokens { :root { /* ---- the three seeds everything else derives from -------------------- */ --seed-brand: oklch(44% 0.095 165); /* ledger green */ --seed-signal: oklch(70% 0.165 62); /* jobsite amber */ --seed-hue: 162; /* ---- surfaces (light) ------------------------------------------------ */ --canvas: oklch(98.6% 0.004 var(--seed-hue)); --surface: oklch(100% 0 0); --surface-2: oklch(99.3% 0.003 var(--seed-hue)); --sunken: oklch(96.6% 0.005 var(--seed-hue)); --sunken-2: oklch(94.4% 0.006 var(--seed-hue)); --overlay: oklch(100% 0 0); --scrim: oklch(21% 0.012 var(--seed-hue) / 0.44); /* ---- the three border tokens ---------------------------------------- */ --border: oklch(90.5% 0.006 var(--seed-hue)); --border-strong: oklch(84% 0.008 var(--seed-hue)); --border-loud: oklch(72% 0.012 var(--seed-hue)); /* ---- ink ------------------------------------------------------------- */ --ink: oklch(21% 0.012 var(--seed-hue)); --ink-2: oklch(38% 0.011 var(--seed-hue)); --muted: oklch(50% 0.010 var(--seed-hue)); /* ≥4.5:1 on canvas */ --faint: oklch(62% 0.008 var(--seed-hue)); /* large text / icons only */ --on-brand: oklch(99% 0.006 var(--seed-hue)); --on-signal: oklch(24% 0.05 55); /* ---- brand ----------------------------------------------------------- */ --brand: var(--seed-brand); --brand-hover: oklch(from var(--seed-brand) calc(l - 0.045) c h); --brand-active: oklch(from var(--seed-brand) calc(l - 0.08) c h); --brand-soft: oklch(from var(--seed-brand) 95.5% 0.028 h); --brand-soft-2: oklch(from var(--seed-brand) 90% 0.045 h); --brand-line: oklch(from var(--seed-brand) 82% 0.055 h); --brand-deep: oklch(22% 0.045 168); --brand-deeper: oklch(16% 0.035 170); --brand-ink: oklch(33% 0.075 165); /* ---- signal ---------------------------------------------------------- */ --signal: var(--seed-signal); --signal-soft: oklch(from var(--seed-signal) 96% 0.035 h); --signal-line: oklch(from var(--seed-signal) 85% 0.09 h); --signal-ink: oklch(48% 0.13 55); /* ---- semantic: matched lightness so pills weigh the same -------------- */ --pos: oklch(52% 0.14 152); --pos-soft: oklch(96% 0.032 152); --pos-line: oklch(85% 0.07 152); --neg: oklch(52% 0.18 26); --neg-soft: oklch(96% 0.032 26); --neg-line: oklch(86% 0.07 26); --warn: oklch(58% 0.14 78); --warn-soft: oklch(96% 0.04 85); --warn-line: oklch(86% 0.08 82); --info: oklch(52% 0.13 250); --info-soft: oklch(96% 0.028 250); --info-line: oklch(86% 0.06 250); --idle: oklch(52% 0.008 var(--seed-hue)); --idle-soft: oklch(96% 0.004 var(--seed-hue)); --idle-line: oklch(87% 0.006 var(--seed-hue)); /* ---- money: its own vocabulary, not recycled brand colors ------------- */ --money-out: var(--ink); /* money leaving is normal — stays neutral */ --money-held: var(--signal-ink); --money-late: var(--neg); --money-saved: var(--pos); /* ---- AI provenance (the governor pattern) ---------------------------- */ --ai-line: oklch(from var(--seed-brand) 74% 0.06 h); --ai-soft: oklch(from var(--seed-brand) 97.5% 0.018 h); --ai-ink: var(--brand-ink); /* ---- type ------------------------------------------------------------ */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-ui: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* weights — never above 580 */ --w-light: 340; --w-book: 380; --w-norm: 440; --w-med: 500; --w-semi: 540; --w-dense: 580; /* fixed rem scale, ratio ~1.15 — product UI, not fluid */ --t-micro: 0.6875rem; /* 11 — chips, table micro-labels */ --t-xs: 0.75rem; /* 12 */ --t-sm: 0.8125rem; /* 13 — the table cell size */ --t-base: 0.875rem; /* 14 — body */ --t-md: 0.9375rem; /* 15 */ --t-lg: 1.0625rem; /* 17 */ --t-xl: 1.25rem; /* 20 */ --t-2xl: 1.5rem; /* 24 */ --t-3xl: 1.875rem; /* 30 */ --t-4xl: 2.375rem; /* 38 */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --lh-loose: 1.7; --lh-num: 1; --track-display: -0.025em; --track-tight: -0.011em; --track-num: -0.008em; --track-label: 0.075em; /* ---- space: 4px base -------------------------------------------------- */ --s-0: 0; --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 20px; --s-10: 24px; --s-11: 28px; --s-12: 32px; --s-13: 40px; --s-14: 48px; --s-15: 56px; --s-16: 64px; --s-17: 80px; --s-18: 96px; --s-19: 128px; /* ---- radius ----------------------------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-full: 999px; /* ---- shell metrics ---------------------------------------------------- */ --nav-w: 232px; --nav-w-collapsed: 56px; --topbar-h: 52px; --row-h: 48px; --row-h-compact: 40px; /* ---- motion — Emil's curves, product durations ----------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --d-press: 120ms; --d-fast: 150ms; --d-base: 200ms; --d-slow: 260ms; --d-drawer: 320ms; /* ---- z scale — semantic, never 9999 ---------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 200; --z-dropdown: 300; --z-drawer-scrim: 400; --z-drawer: 410; --z-modal-scrim: 500; --z-modal: 510; --z-palette: 600; --z-toast: 700; --z-tooltip: 800; /* ---- the only shadows in the system: genuinely floating layers -------- */ --lift-pop: 0 1px 2px oklch(21% 0.012 var(--seed-hue) / 0.06), 0 8px 24px -6px oklch(21% 0.012 var(--seed-hue) / 0.12); --lift-modal: 0 2px 4px oklch(21% 0.012 var(--seed-hue) / 0.06), 0 24px 64px -12px oklch(21% 0.012 var(--seed-hue) / 0.22); --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand); color-scheme: light; } /* ---- dark: warm, never #000, elevation by lightness step ---------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --_dark: 1; } } :root[data-theme="dark"] { --_dark: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: oklch(13.5% 0.006 var(--seed-hue)); --surface: oklch(17.5% 0.007 var(--seed-hue)); --surface-2: oklch(20.5% 0.008 var(--seed-hue)); --sunken: oklch(15.5% 0.006 var(--seed-hue)); --sunken-2: oklch(22% 0.008 var(--seed-hue)); --overlay: oklch(21% 0.008 var(--seed-hue)); --scrim: oklch(8% 0.004 var(--seed-hue) / 0.62); --border: oklch(27% 0.009 var(--seed-hue)); --border-strong: oklch(34% 0.011 var(--seed-hue)); --border-loud: oklch(46% 0.013 var(--seed-hue)); --ink: oklch(95% 0.006 var(--seed-hue)); --ink-2: oklch(83% 0.007 var(--seed-hue)); --muted: oklch(69% 0.009 var(--seed-hue)); --faint: oklch(56% 0.009 var(--seed-hue)); --on-brand: oklch(15% 0.02 165); --brand: oklch(72% 0.115 165); --brand-hover: oklch(78% 0.115 165); --brand-active: oklch(66% 0.115 165); --brand-soft: oklch(24% 0.035 165); --brand-soft-2: oklch(29% 0.05 165); --brand-line: oklch(38% 0.06 165); --brand-ink: oklch(80% 0.10 165); --brand-deep: oklch(15% 0.03 168); --brand-deeper: oklch(11% 0.022 170); --signal: oklch(78% 0.155 68); --signal-soft: oklch(26% 0.05 62); --signal-line: oklch(38% 0.08 62); --signal-ink: oklch(82% 0.13 70); --pos: oklch(72% 0.145 152); --pos-soft: oklch(24% 0.04 152); --pos-line: oklch(36% 0.06 152); --neg: oklch(68% 0.165 26); --neg-soft: oklch(24% 0.045 26); --neg-line: oklch(37% 0.07 26); --warn: oklch(78% 0.135 80); --warn-soft: oklch(25% 0.045 80); --warn-line: oklch(37% 0.07 80); --info: oklch(72% 0.115 250); --info-soft: oklch(24% 0.04 250); --info-line: oklch(36% 0.06 250); --idle: oklch(66% 0.008 var(--seed-hue)); --idle-soft: oklch(23% 0.006 var(--seed-hue)); --idle-line: oklch(33% 0.008 var(--seed-hue)); --money-out: var(--ink); --ai-line: oklch(44% 0.07 165); --ai-soft: oklch(21% 0.022 165); --ai-ink: var(--brand-ink); /* light type optically bolds on dark — drop one step */ --w-book: 340; --w-norm: 400; --w-med: 460; --w-semi: 500; --w-dense: 540; --lift-pop: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -6px oklch(0% 0 0 / 0.5); --lift-modal: 0 2px 4px oklch(0% 0 0 / 0.4), 0 24px 64px -12px oklch(0% 0 0 / 0.62); --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--brand); color-scheme: dark; } } /* explicit toggle wins in both directions — same block, forced selector */ :root[data-theme="dark"] { --canvas: oklch(13.5% 0.006 var(--seed-hue)); --surface: oklch(17.5% 0.007 var(--seed-hue)); --surface-2: oklch(20.5% 0.008 var(--seed-hue)); --sunken: oklch(15.5% 0.006 var(--seed-hue)); --sunken-2: oklch(22% 0.008 var(--seed-hue)); --overlay: oklch(21% 0.008 var(--seed-hue)); --scrim: oklch(8% 0.004 var(--seed-hue) / 0.62); --border: oklch(27% 0.009 var(--seed-hue)); --border-strong: oklch(34% 0.011 var(--seed-hue)); --border-loud: oklch(46% 0.013 var(--seed-hue)); --ink: oklch(95% 0.006 var(--seed-hue)); --ink-2: oklch(83% 0.007 var(--seed-hue)); --muted: oklch(69% 0.009 var(--seed-hue)); --faint: oklch(56% 0.009 var(--seed-hue)); --on-brand: oklch(15% 0.02 165); --brand: oklch(72% 0.115 165); --brand-hover: oklch(78% 0.115 165); --brand-active: oklch(66% 0.115 165); --brand-soft: oklch(24% 0.035 165); --brand-soft-2: oklch(29% 0.05 165); --brand-line: oklch(38% 0.06 165); --brand-ink: oklch(80% 0.10 165); --brand-deep: oklch(15% 0.03 168); --brand-deeper: oklch(11% 0.022 170); --signal: oklch(78% 0.155 68); --signal-soft: oklch(26% 0.05 62); --signal-line: oklch(38% 0.08 62); --signal-ink: oklch(82% 0.13 70); --pos: oklch(72% 0.145 152); --pos-soft: oklch(24% 0.04 152); --pos-line: oklch(36% 0.06 152); --neg: oklch(68% 0.165 26); --neg-soft: oklch(24% 0.045 26); --neg-line: oklch(37% 0.07 26); --warn: oklch(78% 0.135 80); --warn-soft: oklch(25% 0.045 80); --warn-line: oklch(37% 0.07 80); --info: oklch(72% 0.115 250); --info-soft: oklch(24% 0.04 250); --info-line: oklch(36% 0.06 250); --idle: oklch(66% 0.008 var(--seed-hue)); --idle-soft: oklch(23% 0.006 var(--seed-hue)); --idle-line: oklch(33% 0.008 var(--seed-hue)); --money-out: var(--ink); --ai-line: oklch(44% 0.07 165); --ai-soft: oklch(21% 0.022 165); --ai-ink: var(--brand-ink); --w-book: 340; --w-norm: 400; --w-med: 460; --w-semi: 500; --w-dense: 540; --lift-pop: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -6px oklch(0% 0 0 / 0.5); --lift-modal: 0 2px 4px oklch(0% 0 0 / 0.4), 0 24px 64px -12px oklch(0% 0 0 / 0.62); color-scheme: dark; } /* fallback for engines without relative color syntax */ @supports not (color: oklch(from red l c h)) { :root { --brand-hover: oklch(39.5% 0.095 165); --brand-active: oklch(36% 0.095 165); --brand-soft: oklch(95.5% 0.028 165); --brand-soft-2: oklch(90% 0.045 165); --brand-line: oklch(82% 0.055 165); --signal-soft: oklch(96% 0.035 62); --signal-line: oklch(85% 0.09 62); --ai-line: oklch(74% 0.06 165); --ai-soft: oklch(97.5% 0.018 165); } } }