/* ACC Daily · design tokens
 * Borrowed from the full ACC Stock & Flow preview (heather paper, ink chrome, three flow hues) and trimmed.
 * Bare :root = light. Dark = system preference unless the viewer chose light, or the viewer chose dark. */

/* ===== theme-independent ===== */
:root {
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;

  --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  --r-2: 2px; --r-3: 3px;
  --ctl-h: 32px;
  --row: 34px;
  --gutter: 32px;
  --gap: 24px;
  --page-max: 1320px;
  --header-h: 56px;
  --fade: 120ms;
}
@media (max-width: 1099px) { :root { --gutter: 24px; --gap: 20px; } }
@media (max-width: 639px) { :root { --gutter: 16px; --gap: 16px; --ctl-h: 40px; --row: 40px; } }

/* ===== light (default) ===== */
:root {
  color-scheme: light;
  --page: #F0F1EE;
  --surface: #FFFFFF;
  --surface-sunken: #F6F7F4;
  --surface-raised: #FFFFFF;
  --surface-hover: #F1F1EF;
  --surface-selected: #E5E7E2;
  --ink-1: #14171A;
  --ink-2: #474E56;
  --ink-3: #656C74;
  --ink-4: #8A9097;
  --ink-inverse: #FFFFFF;
  --rule: #D8DBD5;
  --rule-soft: #E8EAE6;
  --rule-heavy: #14171A;
  --grid: #E8EAE6;
  --axis: #B9BEB8;
  --accent: #14171A;
  --accent-ink: #FFFFFF;
  --focus: #14171A;
  --scrim: rgba(20, 23, 26, .32);
  --shadow-float: 0 12px 32px rgba(20, 23, 26, .14);
  /* one hue per area: sales raspberry, stock cobalt, supply teal */
  --sales: #AB366E;
  --stock: #2552AA;
  --supply: #00A295;
  --sales-soft: #F2A8C4;
  --stock-soft: #A2C2FA;
  --supply-soft: #8ED0C7;
  --sales-wash: rgba(171, 54, 110, .10);
  --stock-wash: rgba(37, 82, 170, .10);
  --supply-wash: rgba(0, 162, 149, .12);
  --context: #B3B8B2;        /* other days, Other, comparison */
  --series-ink: #3B4148;
  /* status: fixed fills for icons, text variants for labels (always icon + label) */
  --good: #0CA30C;     --good-text: #1F6E2A;
  --warning: #FAB219;  --warning-text: #8A5800;
  --warning-wash: rgba(250, 178, 25, .12);
  --serious: #EC835A;  --serious-text: #A3441C;
  --critical: #D03B3B; --critical-text: #B32E2E;
}

/* ===== dark: system preference, unless the viewer chose light ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0E1012;
    --surface: #171A1C;
    --surface-sunken: #131618;
    --surface-raised: #1D2124;
    --surface-hover: #1F2326;
    --surface-selected: #2A2F33;
    --ink-1: #ECEEEB;
    --ink-2: #B4BAC0;
    --ink-3: #8D949B;
    --ink-4: #6A7178;
    --ink-inverse: #14171A;
    --rule: #2B3034;
    --rule-soft: #22272A;
    --rule-heavy: #ECEEEB;
    --grid: #22272A;
    --axis: #3A4045;
    --accent: #ECEEEB;
    --accent-ink: #14171A;
    --focus: #ECEEEB;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, .5);
    --sales: #C24F86;
    --stock: #4F7DD6;
    --supply: #22A89C;
    --sales-soft: #E39BBD;   /* light tints on dark: 3:1 or more against the sheet */
    --stock-soft: #9DB8EC;
    --supply-soft: #86D3CA;
    --sales-wash: rgba(194, 79, 134, .18);
    --stock-wash: rgba(79, 125, 214, .18);
    --supply-wash: rgba(34, 168, 156, .18);
    --context: #4A5156;
    --series-ink: #C9CED3;
    --good: #0CA30C;     --good-text: #4CC04C;
    --warning: #FAB219;  --warning-text: #F2B53A;
    --warning-wash: rgba(250, 178, 25, .10);
    --serious: #EC835A;  --serious-text: #F0936B;
    --critical: #D03B3B; --critical-text: #F07070;
  }
}

/* ===== dark: viewer chose dark (identical values) ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0E1012;
  --surface: #171A1C;
  --surface-sunken: #131618;
  --surface-raised: #1D2124;
  --surface-hover: #1F2326;
  --surface-selected: #2A2F33;
  --ink-1: #ECEEEB;
  --ink-2: #B4BAC0;
  --ink-3: #8D949B;
  --ink-4: #6A7178;
  --ink-inverse: #14171A;
  --rule: #2B3034;
  --rule-soft: #22272A;
  --rule-heavy: #ECEEEB;
  --grid: #22272A;
  --axis: #3A4045;
  --accent: #ECEEEB;
  --accent-ink: #14171A;
  --focus: #ECEEEB;
  --scrim: rgba(0, 0, 0, .55);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .5);
  --sales: #C24F86;
  --stock: #4F7DD6;
  --supply: #22A89C;
  --sales-soft: #E39BBD;
  --stock-soft: #9DB8EC;
  --supply-soft: #86D3CA;
  --sales-wash: rgba(194, 79, 134, .18);
  --stock-wash: rgba(79, 125, 214, .18);
  --supply-wash: rgba(34, 168, 156, .18);
  --context: #4A5156;
  --series-ink: #C9CED3;
  --good: #0CA30C;     --good-text: #4CC04C;
  --warning: #FAB219;  --warning-text: #F2B53A;
  --warning-wash: rgba(250, 178, 25, .10);
  --serious: #EC835A;  --serious-text: #F0936B;
  --critical: #D03B3B; --critical-text: #F07070;
}

html, body { background: var(--page); color: var(--ink-1); }
body { margin: 0; font: 400 var(--fs-14)/20px var(--font-ui); -webkit-font-smoothing: antialiased; }