/* layercell design system — tokens Dark is the default. Light applies via [data-theme="light"] on or any subtree. Nine colour tokens. Every component references these names, never a raw hex. */ :root { /* colour — dark (default) */ --lc-ink: #100f0e; --lc-ink-raised: #1d1913; --lc-rule: #2b251c; --lc-rule-strong: #40382b; --lc-text: #f3eee4; --lc-text-dim: #a8a091; --lc-text-faint: #8f8577; --lc-signal: #e9b44c; --lc-ok: #86b37a; /* derived */ --lc-header-bg: rgba(16, 15, 14, 0.88); --lc-selection-bg: #40371f; --lc-disabled-bg: #251f18; --lc-disabled-text: #6a6154; /* type families */ --lc-font-serif: 'IBM Plex Serif', Georgia, serif; --lc-font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --lc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* type scale — size / line-height / tracking travel together */ --lc-display-xl: 60px; --lc-display-xl-lh: 1.04; --lc-display-xl-ls: -0.028em; --lc-display-l: 38px; --lc-display-l-lh: 1.15; --lc-display-l-ls: -0.02em; --lc-heading-m: 27px; --lc-heading-m-lh: 1.2; --lc-heading-m-ls: -0.015em; --lc-heading-s: 21px; --lc-heading-s-lh: 1.3; --lc-heading-s-ls: -0.01em; --lc-lede: 19px; --lc-lede-lh: 1.6; --lc-body: 16px; --lc-body-lh: 1.6; --lc-body-s: 14px; --lc-body-s-lh: 1.55; --lc-action: 15px; --lc-action-lh: 1.2; --lc-mono: 13px; --lc-mono-lh: 1.5; --lc-label: 11px; --lc-label-ls: 0.1em; /* space — 4px base, nine steps, no others */ --lc-space-1: 4px; --lc-space-2: 8px; --lc-space-3: 12px; --lc-space-4: 16px; --lc-space-6: 24px; --lc-space-8: 32px; --lc-space-11: 44px; --lc-space-24: 96px; --lc-space-32: 128px; /* geometry */ --lc-radius-cell: 2px; --lc-radius-action: 6px; --lc-rule-width: 1px; --lc-content-max: 1080px; --lc-prose-max: 660px; --lc-header-h: 64px; --lc-hit-min: 44px; /* layers — offset + falling opacity. Three steps only, never a shadow. */ --lc-layer-0-offset: 0px; --lc-layer-0-opacity: 1; --lc-layer-1-offset: 8px; --lc-layer-1-opacity: 0.62; --lc-layer-2-offset: 16px; --lc-layer-2-opacity: 0.34; --lc-transition: 150ms ease; } /* Light mode. The lift reverses: the canvas keeps the warmth, cells go white, so a table reads as paper laid on the page rather than a panel sunk into it. Signal is the only token that shifts by more than lightness — it darkens to hold 4.5:1. */ [data-theme='light'] { --lc-ink: #faf7f1; --lc-ink-raised: #ffffff; --lc-rule: #e5dfd4; --lc-rule-strong: #cdc5b7; --lc-text: #17140f; --lc-text-dim: #565049; --lc-text-faint: #706a5c; --lc-signal: #8a5a14; --lc-ok: #3f6b33; --lc-header-bg: rgba(250, 247, 241, 0.9); --lc-selection-bg: #efe2c4; --lc-disabled-bg: #efebe3; --lc-disabled-text: #a39b8e; }