/* AUTO-GENERATED by scripts/generate-theme-tokens.cjs -- do not hand-edit.
 *
 * Source palette (colorhunt.co/palette/0f3040464858a56f63d99b7f):
 *   primary   #0F3040
 *   secondary #464858
 *   tertiary  #A56F63
 *
 * To try a different palette: edit SEED in the generator script and re-run it.
 * To roll back entirely: see the commented block at the bottom of this file.
 */

:root {
  --md-primary: #446274;
  --md-on-primary: #ffffff;
  --md-primary-container: #c7e7fc;
  --md-on-primary-container: #001e2c;
  --md-secondary: #5b5d6e;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e0e1f5;
  --md-on-secondary-container: #181b29;
  --md-tertiary: #835247;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffdad3;
  --md-on-tertiary-container: #331109;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-background: #fbf9f9;
  --md-on-background: #1b1c1c;
  --md-surface: #fbf9f9;
  --md-on-surface: #1b1c1c;
  --md-surface-variant: #e2e2e4;
  --md-on-surface-variant: #454749;
  --md-outline: #757779;
  --md-outline-variant: #c6c6c8;
  --md-inverse-surface: #303031;
  --md-inverse-on-surface: #f2f0f1;
  --md-inverse-primary: #accbdf;
  --md-surface-dim: #dbd9da;
  --md-surface-bright: #fbf9f9;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f5f3f4;
  --md-surface-container: #efedee;
  --md-surface-container-high: #eae8e8;
  --md-surface-container-highest: #e4e2e2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #accbdf;
    --md-on-primary: #143444;
    --md-primary-container: #2c4a5b;
    --md-on-primary-container: #c7e7fc;
    --md-secondary: #c4c5d9;
    --md-on-secondary: #2d2f3f;
    --md-secondary-container: #444656;
    --md-on-secondary-container: #e0e1f5;
    --md-tertiary: #f7b7a9;
    --md-on-tertiary: #4d251c;
    --md-tertiary-container: #673b31;
    --md-on-tertiary-container: #ffdad3;
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-background: #131314;
    --md-on-background: #e4e2e2;
    --md-surface: #131314;
    --md-on-surface: #e4e2e2;
    --md-surface-variant: #454749;
    --md-on-surface-variant: #c6c6c8;
    --md-outline: #8f9193;
    --md-outline-variant: #454749;
    --md-inverse-surface: #e4e2e2;
    --md-inverse-on-surface: #303031;
    --md-inverse-primary: #446274;
    --md-surface-dim: #131314;
    --md-surface-bright: #39393a;
    --md-surface-container-lowest: #0d0e0f;
    --md-surface-container-low: #1b1c1c;
    --md-surface-container: #1f2020;
    --md-surface-container-high: #292a2b;
    --md-surface-container-highest: #343535;
  }
}

:root[data-theme="dark"] {
  --md-primary: #accbdf;
  --md-on-primary: #143444;
  --md-primary-container: #2c4a5b;
  --md-on-primary-container: #c7e7fc;
  --md-secondary: #c4c5d9;
  --md-on-secondary: #2d2f3f;
  --md-secondary-container: #444656;
  --md-on-secondary-container: #e0e1f5;
  --md-tertiary: #f7b7a9;
  --md-on-tertiary: #4d251c;
  --md-tertiary-container: #673b31;
  --md-on-tertiary-container: #ffdad3;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;
  --md-background: #131314;
  --md-on-background: #e4e2e2;
  --md-surface: #131314;
  --md-on-surface: #e4e2e2;
  --md-surface-variant: #454749;
  --md-on-surface-variant: #c6c6c8;
  --md-outline: #8f9193;
  --md-outline-variant: #454749;
  --md-inverse-surface: #e4e2e2;
  --md-inverse-on-surface: #303031;
  --md-inverse-primary: #446274;
  --md-surface-dim: #131314;
  --md-surface-bright: #39393a;
  --md-surface-container-lowest: #0d0e0f;
  --md-surface-container-low: #1b1c1c;
  --md-surface-container: #1f2020;
  --md-surface-container-high: #292a2b;
  --md-surface-container-highest: #343535;
}

:root[data-theme="light"] {
  --md-primary: #446274;
  --md-on-primary: #ffffff;
  --md-primary-container: #c7e7fc;
  --md-on-primary-container: #001e2c;
  --md-secondary: #5b5d6e;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e0e1f5;
  --md-on-secondary-container: #181b29;
  --md-tertiary: #835247;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffdad3;
  --md-on-tertiary-container: #331109;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;
  --md-background: #fbf9f9;
  --md-on-background: #1b1c1c;
  --md-surface: #fbf9f9;
  --md-on-surface: #1b1c1c;
  --md-surface-variant: #e2e2e4;
  --md-on-surface-variant: #454749;
  --md-outline: #757779;
  --md-outline-variant: #c6c6c8;
  --md-inverse-surface: #303031;
  --md-inverse-on-surface: #f2f0f1;
  --md-inverse-primary: #accbdf;
  --md-surface-dim: #dbd9da;
  --md-surface-bright: #fbf9f9;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f5f3f4;
  --md-surface-container: #efedee;
  --md-surface-container-high: #eae8e8;
  --md-surface-container-highest: #e4e2e2;
}

/* brand-ink: constant across schemes, for chrome that should always read as
 * the deep-navy brand color regardless of light/dark mode (e.g. the sidebar). */
:root {
  --md-brand-ink: #143444;
  --md-brand-ink-variant: #274656;
  --md-on-brand-ink: #e3f3ff;
  --md-on-brand-ink-variant: #9ebdd1;
}

/* success: not a standard M3 role; derived the same way M3 derives error
 * (fixed hue/chroma, tone-mapped per scheme) since there's no brand seed for it. */
:root {
  --md-success: #3b6930;
  --md-on-success: #ffffff;
  --md-success-container: #bcf1a9;
  --md-on-success-container: #012200;
}
:root[data-theme="dark"] {
  --md-success: #a0d48f;
  --md-on-success: #0a3905;
  --md-success-container: #23501b;
  --md-on-success-container: #bcf1a9;
}

/* map choropleth ramp: sequential scale on the primary hue, low -> high density */
:root {
  --md-map-band-0: #d0ecff;
  --md-map-band-1: #a6c5da;
  --md-map-band-2: #7c9aad;
  --md-map-band-3: #537183;
  --md-map-band-4: #2c4a5b;
}
:root[data-theme="dark"] {
  --md-map-band-0: #1e3d4d;
  --md-map-band-1: #3f5d6f;
  --md-map-band-2: #628093;
  --md-map-band-3: #86a5b8;
  --md-map-band-4: #accbdf;
}

/* ---- legacy semantic aliases ----
 * The existing component CSS in index.html was written against this variable
 * set. Aliasing it to the M3 roles above means the color scheme lives in ONE
 * file (this one) -- component CSS never needs to change to adjust colors. */
:root {
  --bg: var(--md-surface);
  --bg-sidebar: var(--md-brand-ink);
  --fg: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --muted-2: color-mix(in srgb, var(--md-on-surface-variant) 70%, var(--md-surface));
  --border: var(--md-outline-variant);
  --accent: var(--md-primary);
  --accent-fg: var(--md-on-primary);
  --accent-soft: var(--md-primary-container);
  --danger: var(--md-error);
  --positive: var(--md-success);
  --surface: var(--md-surface-container-low);
  --surface-hover: var(--md-surface-container);
  --map-empty: var(--md-surface-container-highest);
  --map-band-0: var(--md-map-band-0);
  --map-band-1: var(--md-map-band-1);
  --map-band-2: var(--md-map-band-2);
  --map-band-3: var(--md-map-band-3);
  --map-band-4: var(--md-map-band-4);
  --map-outline: var(--md-surface);
  --map-bubble-fill: color-mix(in srgb, var(--md-tertiary) 55%, transparent);
  --map-bubble-stroke: var(--md-tertiary);

  --sidebar-fg: var(--md-on-brand-ink);
  --sidebar-muted: var(--md-on-brand-ink-variant);
  --sidebar-border: var(--md-brand-ink-variant);
  --sidebar-hover: var(--md-brand-ink-variant);
  --sidebar-active: var(--md-primary-container);
  --sidebar-active-fg: var(--md-on-primary-container);
}

/* ---- M3 shape + elevation scale ---- */
:root {
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.15), 0 1px 3px 1px rgb(0 0 0 / 0.08);
  --elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.18), 0 2px 6px 2px rgb(0 0 0 / 0.10);
  --elevation-3: 0 4px 8px 3px rgb(0 0 0 / 0.12), 0 1px 3px 0 rgb(0 0 0 / 0.20);
  --elevation-4: 0 6px 10px 4px rgb(0 0 0 / 0.14), 0 2px 3px 0 rgb(0 0 0 / 0.22);
  --elevation-5: 0 8px 12px 6px rgb(0 0 0 / 0.15), 0 4px 4px 0 rgb(0 0 0 / 0.24);
  --shadow: var(--elevation-2);

  --state-hover-opacity: 0.08;
  --state-focus-opacity: 0.10;
  --state-pressed-opacity: 0.10;
}
@media (prefers-color-scheme: dark) {
  :root {
    --elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 1px rgb(0 0 0 / 0.3);
    --elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 2px 6px 2px rgb(0 0 0 / 0.3);
    --elevation-3: 0 4px 8px 3px rgb(0 0 0 / 0.35), 0 1px 3px 0 rgb(0 0 0 / 0.4);
    --elevation-4: 0 6px 10px 4px rgb(0 0 0 / 0.35), 0 2px 3px 0 rgb(0 0 0 / 0.4);
    --elevation-5: 0 8px 12px 6px rgb(0 0 0 / 0.35), 0 4px 4px 0 rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 1px rgb(0 0 0 / 0.3);
  --elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 2px 6px 2px rgb(0 0 0 / 0.3);
  --elevation-3: 0 4px 8px 3px rgb(0 0 0 / 0.35), 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --elevation-4: 0 6px 10px 4px rgb(0 0 0 / 0.35), 0 2px 3px 0 rgb(0 0 0 / 0.4);
  --elevation-5: 0 8px 12px 6px rgb(0 0 0 / 0.35), 0 4px 4px 0 rgb(0 0 0 / 0.4);
}

/* ---- ROLLBACK ----
 * If UAT rejects the new colors, restore the previous look by replacing the
 * ":root { ... }" block above (the light-mode legacy aliases) and its dark
 * counterparts with the block below, and dropping the M3 role variables.
 * (Pre-M3 palette, for reference:)
 *
 * :root {
 *   --bg: #ffffff; --bg-sidebar: #f8fafc; --fg: #0f172a; --muted: #64748b;
 *   --muted-2: #94a3b8; --border: #e2e8f0; --accent: #4f46e5; --accent-fg: #ffffff;
 *   --accent-soft: #eef2ff; --danger: #dc2626; --positive: #16a34a;
 *   --surface: #f8fafc; --surface-hover: #f1f5f9;
 *   --shadow: 0 12px 32px -12px rgb(15 23 42 / 0.18);
 *   --map-empty: #e2e8f0; --map-band-0: #e0e7ff; --map-band-1: #c7d2fe;
 *   --map-band-2: #a5b4fc; --map-band-3: #6366f1; --map-band-4: #3730a3;
 *   --map-outline: #ffffff; --map-bubble-fill: rgb(79 70 229 / 0.55);
 *   --map-bubble-stroke: #4f46e5;
 * }
 * :root[data-theme="dark"] {
 *   --bg: #020617; --bg-sidebar: #0a0f1c; --fg: #e2e8f0; --muted: #94a3b8;
 *   --muted-2: #64748b; --border: #334155; --accent: #818cf8; --accent-fg: #0f172a;
 *   --accent-soft: #1e1b4b; --danger: #f87171; --positive: #4ade80;
 *   --surface: #0f172a; --surface-hover: #151f32;
 *   --shadow: 0 12px 32px -12px rgb(0 0 0 / 0.5);
 *   --map-empty: #1e293b; --map-band-0: #312e81; --map-band-1: #4338ca;
 *   --map-band-2: #6366f1; --map-band-3: #818cf8; --map-band-4: #c7d2fe;
 *   --map-outline: #020617; --map-bubble-fill: rgb(129 140 248 / 0.55);
 *   --map-bubble-stroke: #a5b4fc;
 * }
 */