/* ═══════════════════════════════════════════════════════════════ CABINETCALC — DESIGN TOKENS v2.1 ─────────────────────────────────────────────────────────────── Canonical source for ALL CSS custom properties. No classes. No rules. Properties only. Load order: tokens.css → base.css → (marketing.css | app.css) Palettes: Graphite (default, locked for beta) Themes: Light · Dark Typography: DM Serif Display · DM Sans · JetBrains Mono ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── TYPOGRAPHY STACKS Declared on :root so they are available before any palette attribute is resolved (e.g. the tag itself). ───────────────────────────────────────────────────────────────── */ :root { /* Primary stacks — use these everywhere */ --f-display: 'DM Serif Display', serif; --f-ui: 'DM Sans', sans-serif; --f-mono: 'JetBrains Mono', 'DM Mono', monospace; /* Aliases — kept for backward-compat with existing HTML */ --font-display: var(--f-display); --font-ui: var(--f-ui); --font-mono: var(--f-mono); } /* ───────────────────────────────────────────────────────────── LAYOUT CONSTANTS ───────────────────────────────────────────────────────────────── */ :root { --header-h: 74px; --radius: 14px; --radius-lg: 18px; --radius-sm: 8px; } /* ───────────────────────────────────────────────────────────── VIEW MODE SCALE VARS (app pages only — set on [data-view]) Used by: app.css · ds.html ───────────────────────────────────────────────────────────────── */ [data-view="standard"] { --vf-base: 0.9375rem; --vf-sm: 0.8125rem; --vf-lg: 1.0625rem; --vf-label: 0.75rem; --vf-caps: 0.63rem; --vf-caption: 0.7rem; --vf-dim: 0.9rem; --vf-dim-lg: 1.15rem; --vf-dim-xl: 1.5rem; --vf-lh: 1.7; --vf-lh-lg: 1.75; --vf-pad-field: 8px 12px; --vf-pad-btn-md: 11px 20px; --vf-border-field: 1.5px; --vf-touch: 44px; --vf-cut-fs: 0.82rem; } [data-view="shop"] { --vf-base: 1.125rem; --vf-sm: 1rem; --vf-lg: 1.3125rem; --vf-label: 0.9375rem; --vf-caps: 0.8rem; --vf-caption: 0.875rem; --vf-dim: 1.125rem; --vf-dim-lg: 1.4rem; --vf-dim-xl: 1.85rem; --vf-lh: 1.85; --vf-lh-lg: 1.9; --vf-pad-field: 12px 16px; --vf-pad-btn-md: 15px 24px; --vf-border-field: 2px; --vf-touch: 54px; --vf-cut-fs: 1rem; } /* ───────────────────────────────────────────────────────────── PALETTE: GRAPHITE — DARK (default theme) ───────────────────────────────────────────────────────────────── */ [data-palette="graphite"][data-theme="dark"] { /* Surfaces */ --bg: #0F172A; --bg2: #1E293B; --bg3: #273449; --card: #1E293B; --card2: #273449; /* Borders */ --border: #334155; --border2: #475569; /* Text */ --text: #F8FAFC; --text2: #CBD5E1; --text3: #64748B; --text-inv: #0F172A; /* Shadows */ --sh: 0 2px 14px rgba(0,0,0,.45); --sh-lg: 0 8px 36px rgba(0,0,0,.60); /* ── BRASS — brand / primary action ── */ --accent: #D4A44F; --accent2: #B88A37; --accent-lt: #E7B867; --accent-bg: rgba(212,164,79,.12); --accent-bg2: rgba(212,164,79,.22); /* ── CUT — cut list workflow (green) ── */ --cut: #22C55E; --cut-strong: #16A34A; --cut-soft: #86EFAC; --cut-bg: rgba(34,197,94,.14); --cut-bg2: rgba(34,197,94,.24); --cut-border: rgba(34,197,94,.42); /* ── MATERIAL — materials workflow (blue) ── */ --material: #3B82F6; --material-strong: #2563EB; --material-soft: #93C5FD; --material-bg: rgba(59,130,246,.15); --material-bg2: rgba(59, 130, 246, .24); --material-border: rgba(59,130,246,.44); --blue: #3B82F6; --blue-bg: rgba(59,130,246,.15); /* ── AMBER — warnings / advisories ── */ --amber: #F59E0B; --amber-strong: #D97706; --amber-soft: #FCD34D; --amber-bg: rgba(245,158,11,.15); --amber-bg2: rgba(245,158,11,.26); --amber-border: rgba(245,158,11,.40); /* ── DANGER — destructive / errors ── */ --danger: #F87171; --danger2: #EF4444; --danger-soft: #FECACA; --danger-bg: rgba(248,113,113,.12); --danger-bg2: rgba(248,113,113,.22); --danger-border: rgba(248,113,113,.42); /* ── OPTIMIZER — panel layout workflow (purple) ── */ --optimizer: #8B5CF6; --optimizer-strong: #7C3AED; --optimizer-soft: #C4B5FD; --optimizer-bg: rgba(139,92,246,.14); --optimizer-bg2: rgba(139,92,246,.24); --optimizer-border: rgba(139,92,246,.42); } /* ───────────────────────────────────────────────────────────── PALETTE: GRAPHITE — LIGHT ───────────────────────────────────────────────────────────────── */ [data-palette="graphite"][data-theme="light"] { /* Surfaces */ --bg: #F8F9FB; --bg2: #F1F3F6; --bg3: #E8EBF0; --card: #FFFFFF; --card2: #F8F9FB; /* Borders */ --border: #E2E5EA; --border2: #CDD2DA; /* Text */ --text: #111827; --text2: #4B5563; --text3: #9CA3AF; --text-inv: #ffffff; /* Shadows */ --sh: 0 2px 12px rgba(17,24,39,.08); --sh-lg: 0 8px 32px rgba(17,24,39,.12); /* ── BRASS ── */ --accent: #D4A44F; --accent2: #B88A37; --accent-lt: #E7B867; --accent-bg: rgba(212,164,79,.08); --accent-bg2: rgba(212,164,79,.16); /* ── CUT ── */ --cut: #16A34A; --cut-strong: #15803D; --cut-soft: #4ADE80; --cut-bg: rgba(34,197,94,.10); --cut-bg2: rgba(34,197,94,.18); --cut-border: rgba(34,197,94,.30); /* ── MATERIAL ── */ --material: #2563EB; --material-strong: #1D4ED8; --material-soft: #60A5FA; --material-bg: rgba(59,130,246,.10); --material-bg2: rgba(59,130,246,.18); --material-border: rgba(59,130,246,.28); --blue: #2563EB; --blue-bg: rgba(59,130,246,.10); /* ── AMBER ── */ --amber: #D97706; --amber-strong: #B45309; --amber-soft: #F59E0B; --amber-bg: rgba(245,158,11,.11); --amber-bg2: rgba(245,158,11,.20); --amber-border: rgba(245,158,11,.28); /* ── DANGER ── */ --danger: #DC2626; --danger2: #B91C1C; --danger-soft: #FCA5A5; --danger-bg: rgba(220,38,38,.08); --danger-bg2: rgba(220,38,38,.14); --danger-border: rgba(220,38,38,.30); /* ── OPTIMIZER ── */ --optimizer: #7C3AED; --optimizer-strong: #6D28D9; --optimizer-soft: #A78BFA; --optimizer-bg: rgba(124,58,237,.10); --optimizer-bg2: rgba(124,58,237,.18); --optimizer-border: rgba(124,58,237,.28); } /* ───────────────────────────────────────────────────────────── PALETTE: BRASS — DARK Currently identical to Graphite Dark. Preserved for future brand palette differentiation. ───────────────────────────────────────────────────────────────── */ [data-palette="brass"][data-theme="dark"] { --bg: #0F172A; --bg2: #1E293B; --bg3: #273449; --card: #1E293B; --card2: #273449; --border: #334155; --border2: #475569; --text: #F8FAFC; --text2: #CBD5E1; --text3: #64748B; --text-inv: #0F172A; --sh: 0 2px 14px rgba(0,0,0,.45); --sh-lg: 0 8px 36px rgba(0,0,0,.60); --accent: #D4A44F; --accent2: #B88A37; --accent-lt: #E7B867; --accent-bg: rgba(212,164,79,.12); --accent-bg2: rgba(212,164,79,.22); --cut: #22C55E; --cut-strong: #16A34A; --cut-soft: #86EFAC; --cut-bg: rgba(34,197,94,.14); --cut-bg2: rgba(34,197,94,.24); --cut-border: rgba(34,197,94,.42); --material: #3B82F6; --material-strong: #2563EB; --material-soft: #93C5FD; --material-bg: rgba(59,130,246,.15); --material-bg2: rgba(59,130,246,.24); --material-border: rgba(59,130,246,.44); --amber: #F59E0B; --amber-strong: #D97706; --amber-soft: #FCD34D; --amber-bg: rgba(245,158,11,.15); --amber-bg2: rgba(245,158,11,.26); --amber-border: rgba(245,158,11,.40); --danger: #F87171; --danger2: #EF4444; --danger-soft: #FECACA; --danger-bg: rgba(248,113,113,.12); --danger-bg2: rgba(248,113,113,.22); --danger-border: rgba(248,113,113,.42); /* ── OPTIMIZER — panel layout workflow (purple) ── */ --optimizer: #8B5CF6; --optimizer-strong: #7C3AED; --optimizer-soft: #C4B5FD; --optimizer-bg: rgba(139,92,246,.14); --optimizer-bg2: rgba(139,92,246,.24); --optimizer-border: rgba(139,92,246,.42); } /* ───────────────────────────────────────────────────────────── PALETTE: BRASS — LIGHT ───────────────────────────────────────────────────────────────── */ [data-palette="brass"][data-theme="light"] { --bg: #F8F9FB; --bg2: #F1F3F6; --bg3: #E8EBF0; --card: #FFFFFF; --card2: #F8F9FB; --border: #E2E5EA; --border2: #CDD2DA; --text: #111827; --text2: #4B5563; --text3: #9CA3AF; --text-inv: #ffffff; --sh: 0 2px 12px rgba(17,24,39,.08); --sh-lg: 0 8px 32px rgba(17,24,39,.12); --accent: #D4A44F; --accent2: #B88A37; --accent-lt: #E7B867; --accent-bg: rgba(212,164,79,.08); --accent-bg2: rgba(212,164,79,.16); --cut: #16A34A; --cut-strong: #15803D; --cut-soft: #4ADE80; --cut-bg: rgba(34,197,94,.10); --cut-bg2: rgba(34,197,94,.18); --cut-border: rgba(34,197,94,.30); --material: #2563EB; --material-strong: #1D4ED8; --material-soft: #60A5FA; --material-bg: rgba(59,130,246,.10); --material-bg2: rgba(59,130,246,.18); --material-border: rgba(59,130,246,.28); --amber: #D97706; --amber-strong: #B45309; --amber-soft: #F59E0B; --amber-bg: rgba(245,158,11,.11); --amber-bg2: rgba(245,158,11,.20); --amber-border: rgba(245,158,11,.28); --danger: #DC2626; --danger2: #B91C1C; --danger-soft: #FCA5A5; --danger-bg: rgba(220,38,38,.08); --danger-bg2: rgba(220,38,38,.14); --danger-border: rgba(220,38,38,.30); /* ── OPTIMIZER — panel layout workflow (purple) ── */ --optimizer: #7C3AED; --optimizer-strong: #6D28D9; --optimizer-soft: #A78BFA; --optimizer-bg: rgba(124,58,237,.10); --optimizer-bg2: rgba(124,58,237,.18); --optimizer-border: rgba(124,58,237,.28); }