/*
 * Brand token set for FlowState Pros.
 *
 * Architecture (light/dark via both prefers-color-scheme and an explicit
 * data-theme override) ported unchanged from mockup/board-dashboard-mockup.html
 * — only the token values change here, per context/brand.md's documented
 * mapping. --series-hvac, --series-plumb, --pos, --page, and the masthead
 * accent are the values brand.md explicitly calls out for swapping; --neg,
 * --delta-good, --delta-bad, --funnel-1 through --funnel-4, and
 * --tooltip-bg/--tooltip-ink/--tooltip-ink-2 are inherited from the mock-up
 * as-is (brand.md doesn't specify real-brand replacements for those) and are
 * only used once the real charts are ported in a later phase — not
 * exercised by this increment's login/dashboard-shell/admin-shell templates.
 *
 * IMPORTANT: this comment previously contained a literal asterisk directly
 * followed by a slash (from writing wildcard-style names like "--delta-*"
 * back-to-back with the next slash-separated name) — CSS closes a comment
 * at the first such asterisk-slash pair it finds, so that combination
 * silently truncated this comment early and corrupted the parse of the
 * entire rest of the file: no rule below this point was ever actually
 * applied by a real browser (only app.css's own rules, which don't depend
 * on these custom properties, rendered). Never let an asterisk and a slash
 * land adjacent to each other inside a CSS comment.
 */

:root {
  --page: #f9f6ef;
  --surface: #fcfcfb;
  --ink: #1c1c1c;
  --ink-2: #5c5c5c;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: #e0d7cd;
  --masthead-accent: #003049;
  --series-hvac: #0273ad;
  --series-plumb: #1f7855;
  --pos: #0273ad;
  --neg: #e34948;
  --delta-good: #006300;
  --delta-bad: #d03b3b;
  --funnel-1: #86b6ef;
  --funnel-2: #5598e7;
  --funnel-3: #0273ad;
  --funnel-4: #1c5cab;
  --chip-wash: rgba(2, 115, 173, 0.08);
  --tooltip-bg: #262624;
  --tooltip-ink: #ffffff;
  --tooltip-ink-2: #c3c2b7;
  /* Modal/drawer scrim + the drawer panel's own surface tone. Light mode:
     darkening the backdrop toward black reads clearly against a light
     page, so --surface-elevated barely needs to differ from --surface.
     See the dark-mode block below for why both differ there. */
  --scrim: rgba(11, 11, 11, 0.32);
  --surface-elevated: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --masthead-accent: #003049;
    --series-hvac: #0088cf;
    --series-plumb: #4b9b00;
    --pos: #0088cf;
    --neg: #e66767;
    --delta-good: #0ca30c;
    --delta-bad: #e66767;
    --funnel-1: #86b6ef;
    --funnel-2: #5598e7;
    --funnel-3: #0088cf;
    --funnel-4: #1c5cab;
    --chip-wash: rgba(0, 136, 207, 0.14);
    --tooltip-bg: #f0efec;
    --tooltip-ink: #1c1c1c;
    --tooltip-ink-2: #5c5c5c;
    /* A flat black scrim barely darkens an already-near-black --page, so
       dark mode needs a notably higher opacity to mute the bright
       foreground content (white numerals, saturated chart fills) sitting
       on top of it — that's the thing that actually needs to recede, not
       the background itself. --surface-elevated is a Material-style
       "elevation overlay" (a light tint mixed into --surface) rather than
       relying on box-shadow, which barely reads on a dark background —
       this is what actually makes the drawer pop, not the scrim alone. */
    --scrim: rgba(0, 0, 0, 0.6);
    --surface-elevated: #2a2a28;
  }
}

:root[data-theme="light"] {
  --page: #f9f6ef;
  --surface: #fcfcfb;
  --ink: #1c1c1c;
  --ink-2: #5c5c5c;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: #e0d7cd;
  --masthead-accent: #003049;
  --series-hvac: #0273ad;
  --series-plumb: #1f7855;
  --pos: #0273ad;
  --neg: #e34948;
  --delta-good: #006300;
  --delta-bad: #d03b3b;
  --funnel-1: #86b6ef;
  --funnel-2: #5598e7;
  --funnel-3: #0273ad;
  --funnel-4: #1c5cab;
  --chip-wash: rgba(2, 115, 173, 0.08);
  --tooltip-bg: #262624;
  --tooltip-ink: #ffffff;
  --tooltip-ink-2: #c3c2b7;
  --scrim: rgba(11, 11, 11, 0.32);
  --surface-elevated: #ffffff;
}

:root[data-theme="dark"] {
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --masthead-accent: #003049;
  --series-hvac: #0088cf;
  --series-plumb: #4b9b00;
  --pos: #0088cf;
  --neg: #e66767;
  --delta-good: #0ca30c;
  --delta-bad: #e66767;
  --funnel-1: #86b6ef;
  --funnel-2: #5598e7;
  --funnel-3: #0088cf;
  --funnel-4: #1c5cab;
  --chip-wash: rgba(0, 136, 207, 0.14);
  --tooltip-bg: #f0efec;
  --tooltip-ink: #1c1c1c;
  --tooltip-ink-2: #5c5c5c;
  --scrim: rgba(0, 0, 0, 0.6);
  --surface-elevated: #2a2a28;
}