/* ============================================================================
   FAHO — THEMES
   ----------------------------------------------------------------------------
   THE single source of colour. Every colour the UI uses is a token defined
   here; `app.css` references only `var(--token)` (deriving tints/glows from
   these via `color-mix()`), so it never hardcodes a colour.

   Adding a new theme = copy one block below, give it a `[data-theme="<name>"]`
   selector, and tweak the values. Then add the name to THEMES in app.js so the
   switcher offers it. Nothing else needs editing.

   `:root` holds the default (dark) theme — applied when no/unknown data-theme
   is set, so the page is never colourless even before JS runs.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0c100d;
  --bg-2: #0f1411;
  --panel: #141a16;
  --panel-2: #1b2219;
  --panel-3: #222b21;
  --border: #2b342b;
  --border-bright: #3a463a;

  /* Ink */
  --text: #e9efe7;
  --text-strong: #ffffff;   /* max-contrast ink (hover states) */
  --on-accent: #ffffff;     /* ink over filled accent/danger surfaces */
  --muted: #8f9d8c;
  --muted-2: #6b766a;

  /* Signal palette */
  --accent: #5e7d4f;        /* olive (primary action) */
  --accent-2: #84b06a;      /* bright olive (links) */
  --signal: #d7a13b;        /* amber — command/alert accent */
  --signal-2: #e9b94f;
  --danger: #d35c52;
  --warn: #c7993f;
  --ok: #6fae6b;
  --ok-glow: #8fd486;
  --info: #5b8aa6;
  --violet: #9a86c4;

  /* Canonical per-status colours — single source for charts and badges,
     keyed by Person.Status code. */
  --st-in_service: #6fae6b;
  --st-hospital: #d35c52;
  --st-leave: #c7993f;
  --st-mission: #5b8aa6;
  --st-training: #9a86c4;
  --st-szch: #e0564a;
  --st-discharged: #76837a;

  /* Atmosphere & depth */
  --grid-line: rgba(255, 255, 255, .018);     /* tactical grid overlay */
  --panel-sheen: rgba(255, 255, 255, .015);   /* top highlight on panels */
  --topbar-veil: rgba(0, 0, 0, .25);          /* darkening above the topbar */
  --backdrop: rgba(6, 9, 7, .66);             /* modal backdrop */
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --logo-invert: 0;                           /* white logo reads as-is on dark */
}

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

  /* Surfaces — warm olive-tinted paper. The bg sits noticeably below the
     near-white panels so cards lift off the page (depth the old, too-close
     values lacked); panel-3 is the darker "well" for chart tracks/inputs. */
  --bg: #e4e8da;
  --bg-2: #dde1d1;
  --panel: #fbfcf8;
  --panel-2: #f1f4ea;
  --panel-3: #e1e5d4;
  --border: #ccd1bd;
  --border-bright: #b3ba9e;

  /* Ink */
  --text: #232a1e;
  --text-strong: #12160d;
  --on-accent: #ffffff;
  --muted: #5a6350;
  --muted-2: #868f78;

  /* Signal palette — darkened so it reads on light surfaces */
  --accent: #5a7849;
  --accent-2: #4d6b3c;
  --signal: #b07d17;
  --signal-2: #9a6f12;
  --danger: #c23b30;
  --warn: #a9781b;
  --ok: #4f9a4b;
  --ok-glow: #3c8638;
  --info: #3c7191;
  --violet: #6c58a3;

  /* Per-status colours */
  --st-in_service: #4f9a4b;
  --st-hospital: #c23b30;
  --st-leave: #a9781b;
  --st-mission: #3c7191;
  --st-training: #6c58a3;
  --st-szch: #c23b30;
  --st-discharged: #868f78;

  /* Atmosphere & depth */
  --grid-line: rgba(40, 50, 30, .05);
  --panel-sheen: rgba(255, 255, 255, .6);
  --topbar-veil: rgba(40, 50, 30, .05);
  --backdrop: rgba(35, 42, 30, .42);
  --shadow: 0 6px 22px rgba(45, 52, 32, .16);
  --logo-invert: 1;                           /* invert the white logo to read on light */
}