/* MPE design tokens — single source for both apps (DESIGN_SPEC.md §1, v1).
 * SHARED FILE: duplicated verbatim into each repo. Announce any token change
 * in STATUS.md. Never hardcode a color outside this block.
 *
 * Theme: light is the :root default; dark applies via BOTH
 *   :root[data-theme="dark"]        (explicit choice)
 *   @media (prefers-color-scheme:dark) when no [data-theme] is set  (Auto).
 * The no-flash inline script in index.html sets data-theme before first paint. */

:root {
  /* brand + accents */
  --navy: #052E51;      /* brand dark / active nav (light) */
  --orange: #D6350A;    /* primary CTA, badges (2026-07-20: darkened from #EA3A0B — owner-approved contrast fix, white-on-orange 4.8:1; field app mirrors this, dark stays #FF5A2B) */
  --blue: #009BE6;      /* info, active states */
  --accent: #0079c4;    /* links, tab underline */
  /* surfaces + ink */
  --bg: #FAFBFD;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9; /* inputs, hovers */
  --line: #E7EBF1;
  --ink: #122437;
  --ink2: #516174;
  --ink3: #667487; /* 2026-07-20: darkened from #93A2B4 — owner-approved contrast fix, 4.76:1 on white */
  /* status */
  --good: #0E9F6E;
  --warn: #D97706;
  --bad: #DC2626;
  /* tinted status pill fills (light) */
  --good-soft: #E4F7EF;  --good-ink: #0B7A55;
  --blue-soft: #E3F4FD;  --blue-ink: #026DA6;
  --warn-soft: #FDF1E0;  --warn-ink: #9A5B08;
  --bad-soft:  #FBE9E8;  --bad-ink:  #B42318;
  --gray-soft: #EEF2F6;  --gray-ink: #5B6B7D;
  /* Customer 360 header band — intentionally DARK in BOTH themes (DESIGN_SPEC §2:
     "navy gradient band … the one dark element in the light theme"). Defined only
     here so the dark overrides fall through to these same values → always dark. */
  --band-1: #0A3E6E;         /* gradient start (lighter navy) */
  --band-2: #04203C;         /* gradient end (deep navy) */
  --band-ink: #FFFFFF;       /* primary text on band */
  --band-ink-dim: #A9C2DD;   /* secondary text on band */
  --band-good: #7EE7C0;      /* balance clear, on band */
  --band-bad: #FFB4A8;       /* balance owing, on band */
  --band-chip: rgba(255,255,255,.12);       /* chip fill on band */
  --band-chip-hover: rgba(255,255,255,.22);
  --band-line: rgba(255,255,255,.16);        /* hairline divider on band */
  /* shadow */
  --shadow: 0 1px 3px rgba(18,36,55,.05), 0 8px 24px rgba(18,36,55,.05);
  /* non-color tokens */
  --r-card: 14px;
  --r-ctl: 10px;
  --r-pill: 22px;
  --space: 8px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-base: 15px;
}

/* ---- Dark values ---- */
:root[data-theme="dark"] {
  --navy: #009BE6;      /* active nav uses blue in dark */
  --orange: #FF5A2B;
  --blue: #3DB8F5;
  --accent: #4FC3FF;
  --bg: #0B1826;
  --surface: #12233A;
  --surface-2: #1A2F4A;
  --line: #24405F;
  --ink: #E8EFF6;
  --ink2: #A9BBCE;
  --ink3: #8098B2; /* 2026-07-20: darkened from #6E86A0 — owner-approved contrast fix, 5.31:1 on dark surface */
  --good: #2ECF96;
  --warn: #F5A623;
  --bad: #FF6B6B;
  --good-soft: #10362A;  --good-ink: #6FE7BE;
  --blue-soft: #0E2C41;  --blue-ink: #7FD3FF;
  --warn-soft: #3A2A10;  --warn-ink: #F5C777;
  --bad-soft:  #3A1B1B;  --bad-ink:  #FF9E9E;
  --gray-soft: #1E344E;  --gray-ink: #9DB0C6;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
}

/* Auto: same dark values when the OS is dark and no explicit choice is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --navy: #009BE6;
    --orange: #FF5A2B;
    --blue: #3DB8F5;
    --accent: #4FC3FF;
    --bg: #0B1826;
    --surface: #12233A;
    --surface-2: #1A2F4A;
    --line: #24405F;
    --ink: #E8EFF6;
    --ink2: #A9BBCE;
    --ink3: #8098B2; /* 2026-07-20: darkened from #6E86A0 — owner-approved contrast fix, 5.31:1 on dark surface */
    --good: #2ECF96;
    --warn: #F5A623;
    --bad: #FF6B6B;
    --good-soft: #10362A;  --good-ink: #6FE7BE;
    --blue-soft: #0E2C41;  --blue-ink: #7FD3FF;
    --warn-soft: #3A2A10;  --warn-ink: #F5C777;
    --bad-soft:  #3A1B1B;  --bad-ink:  #FF9E9E;
    --gray-soft: #1E344E;  --gray-ink: #9DB0C6;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  }
}