/* ════════════════════════════════════════════════════════════
Stock Aging Dashboard — NORTHWIND design system
Parchment (light) primary · Espresso (dark) toggle
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── Theme tokens (shared with landing page) ─── */
:root, [data-theme="light"] {
--bg-0:#ede4cf; --bg-1:#faf5e8; --surface:#ffffff; --surface-hi:#fbf6ea;
--surface-2:#f4ecda;
--line:rgba(42,29,8,.10); --line-hi:rgba(42,29,8,.20);
--text:#2a1d08; --text-mute:#7a6e5c; --text-dim:#a99a80;
--gold:#8c6418; --gold-soft:#c79433; --gold-ink:#fff8ed;
--gold-wash:rgba(199,147,51,.12);
--green:#3f8f3a; --green-soft:#5ba34f;
--grade-b:#9333ea;
--noise:0;
--zebra:rgba(42,29,8,.022);
--shadow:0 1px 2px rgba(42,29,8,.05), 0 6px 22px -16px rgba(42,29,8,.30);
}
[data-theme="dark"] {
--bg-0:#0a0705; --bg-1:#140e0b; --surface:#1d1612; --surface-hi:#241c16;
--surface-2:#2a201a;
--line:rgba(239,230,216,.08); --line-hi:rgba(239,230,216,.20);
--text:#f4ecdd; --text-mute:#b8a98f; --text-dim:#7a6e5c;
--gold:#f0b340; --gold-soft:#ffd27a; --gold-ink:#2a1d08;
--gold-wash:rgba(240,179,64,.10);
--green:#9fcf63; --green-soft:#b6dd86;
--grade-b:#c79bed;
--noise:.05;
--zebra:rgba(239,230,216,.022);
--shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 38px -24px rgba(0,0,0,.8);
}
/* fixed espresso tokens — used by the masthead in BOTH themes (a letterhead) */
:root {
--ink-0:#16100c; --ink-1:#1d1612; --ink-2:#2a201a;
--ink-line:rgba(239,230,216,.10); --ink-line-hi:rgba(239,230,216,.18);
--ink-text:#f4ecdd; --ink-mute:#b8a98f; --ink-dim:#7a6e5c;
--ink-gold:#f0b340; --ink-gold-soft:#ffd27a;
}
/* status — vivid functional signals, kept consistent across themes */
:root {
--s-expired:#dc2626; --s-critical:#ea580c; --s-warning:#d4900b; --s-safe:#16a34a;
--s-expired-bg:rgba(220,38,38,.10); --s-critical-bg:rgba(234,88,12,.10);
--s-warning-bg:rgba(212,144,11,.13); --s-safe-bg:rgba(22,163,74,.11);
--s-unknown:#94a3b8; --s-unknown-bg:rgba(148,163,184,.12);
--s-oos:#64748b; --s-oos-bg:rgba(100,116,139,.12);
}
[data-theme="dark"] {
--s-warning:#e3a82a;
--s-expired-bg:rgba(220,38,38,.16); --s-critical-bg:rgba(234,88,12,.16);
--s-warning-bg:rgba(227,168,42,.16); --s-safe-bg:rgba(22,163,74,.18);
}
/* Reorder status colors stay conventional: red needs action, amber needs review,
green is healthy. Overstock is informational blue; no velocity is neutral.
These tokens also drive the Marimekko, badges, dots and brand counts. */
:root, [data-theme="light"] {
--mk-order:#e0645f; --mk-watch:#d9982f; --mk-ok:#3fa96a; --mk-over:#5b93d6; --mk-nov:#a7b0bb; --mk-uncfg:#8064a2; --mk-conflict:#a34b68;
--ro-order:#c62828; --ro-watch:#a16207; --ro-ok:#15803d; --ro-over:#2563eb; --ro-nov:#64748b; --ro-uncfg:#6d4a8f; --ro-conflict:#9d174d;
}
[data-theme="dark"] {
--mk-order:#ff6b62; --mk-watch:#f0b03c; --mk-ok:#48c07a; --mk-over:#79aef5; --mk-nov:#9aa4b0; --mk-uncfg:#c4a5e8; --mk-conflict:#f29aba;
--ro-order:#ff7b72; --ro-watch:#facc15; --ro-ok:#4ade80; --ro-over:#7cb0ff; --ro-nov:#a1a1aa; --ro-uncfg:#d8b4fe; --ro-conflict:#f9a8d4;
}
html { background:var(--bg-0); }
body {
font-family:'Inter', system-ui, sans-serif;
/* ponytail: page-wide tabular figures — the mono face used to align number
columns for free; now that everything is sans, one rule replaces it. */
font-variant-numeric:tabular-nums;
background:var(--bg-1);
color:var(--text);
font-size:14px; line-height:1.45;
-webkit-font-smoothing:antialiased;
min-height:100vh;
position:relative;
}
[data-theme="dark"] body {
background:radial-gradient(ellipse at 50% -8%, #221912 0%, #140e0b 46%, #0a0705 100%);
}
body::after {
content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
opacity:var(--noise); mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8, widths (table-layout:fixed) so
short numeric columns (Days/Remaining %/Status/etc.) can't get auto-stretched
wider than their content needs — Product Name (the one unset