/* ═══════════════════════════════════════════════════ Lumber Design System — Tier 2: System Tokens ═══════════════════════════════════════════════════ Semantic tokens consumed by components. Product themes override this tier via data-product. Namespace: --lb-* ═══════════════════════════════════════════════════ */ :root { /* ── Color System ── */ --lb-surface: var(--lb-ref-n5); --lb-surface-container: var(--lb-ref-n15); --lb-surface-dim: var(--lb-ref-n10); --lb-on-surface: var(--lb-ref-n95); --lb-on-surface-dim: var(--lb-ref-n90); --lb-primary: var(--lb-ref-lumber); --lb-primary-variant: var(--lb-ref-lumber-2); --lb-on-primary: #1a1a1a; --lb-secondary: var(--lb-ref-brand); --lb-warn: var(--lb-ref-warn); --lb-error: var(--lb-ref-danger); --lb-success: var(--lb-ref-success); /* ── Glass System ── */ --lb-glass-blur: 24px; --lb-glass-sat: 180%; --lb-glass-tint: rgba(10, 15, 28, 0.55); --lb-glass-border: rgba(255, 255, 255, 0.12); --lb-glass-highlight: 0.08; /* ── Elevation ── */ --lb-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.2); --lb-shadow-2: 0 20px 50px rgba(0, 0, 0, 0.4); --lb-shadow-3: 0 40px 80px rgba(0, 0, 0, 0.5); /* ── Glow (accent-derived) ── */ --lb-glow: 0 0 20px color-mix(in srgb, var(--lb-primary) 25%, transparent); /* ── Border ── */ --lb-border: var(--lb-glass-border); /* ── Shape ── */ --lb-radius: var(--lb-ref-r-xl); /* ── Spacing (aliased for readability) ── */ --lb-sp1: var(--lb-ref-sp1); --lb-sp2: var(--lb-ref-sp2); --lb-sp3: var(--lb-ref-sp3); --lb-sp4: var(--lb-ref-sp4); --lb-sp5: var(--lb-ref-sp5); --lb-sp6: var(--lb-ref-sp6); /* ── Layout Frame ── */ --lb-header-height: 56px; --lb-page-max-w: 1400px; --lb-page-gutter: 48px; --lb-page-top: calc(var(--lb-header-height) + var(--lb-sp5)); /* ── Z-Index Stacking ── */ --lb-z-base: 1; --lb-z-header: 1000; --lb-z-popover: 9000; --lb-z-modal: 10000; --lb-z-toast: 10005; --lb-z-sidebar: 10002; --lb-z-sidebar-inner: 10001; --lb-z-uber: 100000; /* ── Control Surfaces ── */ --lb-control-knob: #ffffff; --lb-scrollbar-thumb: rgba(255, 255, 255, 0.1); --lb-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2); /* ── Density (ThemeDesigner controls this) ── */ --lb-density: 1.15; /* ── Typography (density-aware) ── */ --lb-text-xs: calc(9px * var(--lb-density)); --lb-text-sm: calc(11px * var(--lb-density)); --lb-text-base: calc(13px * var(--lb-density)); --lb-text-md: calc(14px * var(--lb-density)); --lb-text-lg: calc(16px * var(--lb-density)); --lb-text-xl: calc(20px * var(--lb-density)); --lb-text-2xl: calc(24px * var(--lb-density)); --lb-text-3xl: calc(32px * var(--lb-density)); /* ── Icon Sizes (LB canonical) ── */ --lb-icon-sm: var(--lb-ref-icon-sm); --lb-icon-md: var(--lb-ref-icon-md); --lb-icon-lg: var(--lb-ref-icon-lg); --lb-icon-xl: var(--lb-ref-icon-xl); } /* ═══════════════════════════════════════════════════ Product Overrides — Tier 2 ONLY Applied via data-product on ═══════════════════════════════════════════════════ */ [data-product="lumber"] { --lb-primary: var(--lb-ref-lumber); --lb-primary-variant: var(--lb-ref-lumber-2); --lb-on-primary: #1a1a1a; } [data-product="workshop"] { --lb-primary: var(--lb-ref-ws); --lb-primary-variant: var(--lb-ref-ws-2); --lb-on-primary: #ffffff; } [data-product="forge"] { --lb-primary: var(--lb-ref-forge); --lb-primary-variant: var(--lb-ref-forge-2); --lb-on-primary: #1a1a1a; } [data-product="firefly"] { --lb-primary: var(--lb-ref-ff); --lb-primary-variant: var(--lb-ref-ff-2); --lb-on-primary: #ffffff; } [data-product="ledger"] { --lb-primary: var(--lb-ref-ledger); --lb-primary-variant: var(--lb-ref-ledger-2); --lb-on-primary: #1a1a1a; } /* ═══════════════════════════════════════════════════ Legacy Aliases — Backward Compatibility Bridge ═══════════════════════════════════════════════════ Maps old variable names to the new LB token system. Every existing var(--accent), var(--bg), etc. will automatically resolve via this bridge. REMOVE after full CSS migration (Phase 8). ═══════════════════════════════════════════════════ */ :root { /* ── Core colors ── */ --bg: var(--lb-surface); --muted: var(--lb-surface-dim); --card: var(--lb-surface-container); --ink: var(--lb-on-surface); --ink-dim: var(--lb-on-surface-dim); --brand: var(--lb-secondary); --accent: var(--lb-primary); --accent-rgb: var(--lb-ref-ws-rgb); --warn: var(--lb-warn); --danger: var(--lb-error); /* ── Shape ── */ --radius: var(--lb-radius); --control-radius: var(--lb-ref-r-md); --card-radius: var(--lb-radius); /* ── Glass ── */ --glass: var(--lb-ref-n30); --border: var(--lb-border); --glow: var(--lb-glow); /* ── Spacing ── */ --space-1: var(--lb-sp1); --space-2: var(--lb-sp2); --space-3: var(--lb-sp3); --space-4: var(--lb-sp4); --space-5: var(--lb-sp5); --space-6: var(--lb-sp6); /* ── Elevation ── */ --soft-shadow: var(--lb-shadow-1); --hard-shadow: var(--lb-shadow-2); /* ── Layout ── */ --header-height: var(--lb-header-height); --page-max-width: var(--lb-page-max-w); --page-gutter: var(--lb-page-gutter); --page-top-pad: var(--lb-page-top); /* ── Product accent bridge ── */ --product-accent: var(--lb-primary); --product-accent-2: var(--lb-primary-variant); --product-accent-contrast: var(--lb-on-primary); /* ── AG icon size aliases ── */ --lb-icon-size-sm: var(--lb-icon-sm); --lb-icon-size-md: var(--lb-icon-md); --lb-icon-size-lg: var(--lb-icon-lg); --lb-icon-size-xl: var(--lb-icon-xl); /* ── Typography ── */ --font-main: var(--lb-ref-font); --font-mono: var(--lb-ref-font-mono); }