/*
 * Plainzy web design tokens, "Cobalt" palette.
 *
 * Values mirror plainzy-mobile/src/constants/theme.ts, which is the source of truth for colour.
 * scripts/check-contrast.js verifies every pair below against WCAG 2.2 AAA and, when the mobile
 * repo is checked out next to this one, fails if a value here drifts from theme.ts.
 * Re-run `npm test` after changing anything in this file.
 *
 * Theme behaviour: follows the visitor's system light/dark setting on first load. A manual
 * on/off dark-mode toggle sets data-theme="dark" or data-theme="light" on <html> and wins
 * over the system setting. The dark values therefore appear twice (system + manual); the
 * contrast script fails if the two copies ever differ.
 */

:root {
  color-scheme: light dark;

  --bg: #F4F6FA;
  --ink: #0F1626;
  --mid: #3F495C;
  --light: #444E62;
  --border: #6B7690;
  --border-2: #59647E;
  --bg-3: #E8ECF4;
  --surface: #FFFFFF;
  --accent: #142F7A;
  --accent-mid: #1B3FA0;
  --accent-light: #E6ECFB;
  --accent-border: #9DB4EC;
  --danger: #98130A;
  --danger-bg: #FDECEA;
  --danger-border: #F0B8B4;
  --warn: #6B3F00;
  --warn-bg: #FFF3DC;
  --warn-border: #F5C98A;
  --ok: #0B5A26;
  --ok-bg: #E6F4EA;
  --ok-border: #9FD4B8;
  --focus: #0F1626;
  --nav-bg: #FFFFFF;

  --primary: #1B3FA0;
  --on-primary: #FFFFFF;
  --danger-fill: #98130A;
  --on-danger: #FFFFFF;
  --neutral-fill: #0F1626;
  --on-neutral: #FFFFFF;
  --hairline: #DCE1EC;
  --scrim: rgba(244,246,250,0.88);
  --scrim-label: rgba(8,12,22,0.8);
  --on-scrim: #FFFFFF;
  --shadow: #000000;

  /* Fixed risk-badge colours, identical in both themes (numeral sits on the fill). */
  --risk-low: #155c30;
  --risk-medium: #f0a040;
  --risk-high: #9a1e14;
  --badge-text-on-fill: #ffffff;
  --badge-text-on-medium: #0F1626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0E1624;
    --ink: #F1F4FA;
    --mid: #B7C2D9;
    --light: #B4C0D8;
    --border: #6F82A6;
    --border-2: #8496B8;
    --bg-3: #1F2B45;
    --surface: #161F33;
    --accent: #9DC0FF;
    --accent-mid: #A9C7FF;
    --accent-light: #1C2A4A;
    --accent-border: #3F5A91;
    --danger: #FF9C93;
    --danger-bg: #3A1A22;
    --danger-border: #7A3A40;
    --warn: #F8C878;
    --warn-bg: #3A2B0F;
    --warn-border: #7A5A1E;
    --ok: #8EE3AF;
    --ok-bg: #13301F;
    --ok-border: #2F6B47;
    --focus: #F1F4FA;
    --nav-bg: #161F33;

    --primary: #8CB4FF;
    --on-primary: #0A1330;
    --danger-fill: #FF9C93;
    --on-danger: #2B0805;
    --neutral-fill: #34466E;
    --on-neutral: #F1F4FA;
    --hairline: #26324D;
    --scrim: rgba(8,12,22,0.55);
    --scrim-label: rgba(8,12,22,0.8);
    --on-scrim: #FFFFFF;
    --shadow: #000000;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0E1624;
  --ink: #F1F4FA;
  --mid: #B7C2D9;
  --light: #B4C0D8;
  --border: #6F82A6;
  --border-2: #8496B8;
  --bg-3: #1F2B45;
  --surface: #161F33;
  --accent: #9DC0FF;
  --accent-mid: #A9C7FF;
  --accent-light: #1C2A4A;
  --accent-border: #3F5A91;
  --danger: #FF9C93;
  --danger-bg: #3A1A22;
  --danger-border: #7A3A40;
  --warn: #F8C878;
  --warn-bg: #3A2B0F;
  --warn-border: #7A5A1E;
  --ok: #8EE3AF;
  --ok-bg: #13301F;
  --ok-border: #2F6B47;
  --focus: #F1F4FA;
  --nav-bg: #161F33;

  --primary: #8CB4FF;
  --on-primary: #0A1330;
  --danger-fill: #FF9C93;
  --on-danger: #2B0805;
  --neutral-fill: #34466E;
  --on-neutral: #F1F4FA;
  --hairline: #26324D;
  --scrim: rgba(8,12,22,0.55);
  --scrim-label: rgba(8,12,22,0.8);
  --on-scrim: #FFFFFF;
  --shadow: #000000;
}