/* Design tokens ported verbatim from D:\GitHub\Kob.PlanNiX (see _docs/ui.md §2).

   Light theme contrast (updated 2026-09-14): the palette was ported straight from the mockup and several
   values failed WCAG AA on a white surface — `--text-muted` #9CA3AF measured 2.5:1 (table headers,
   field hints, comment timestamps, login subtitle) and every semantic colour was a *fill* colour being
   used as TEXT: warning 2.1:1, success 2.0:1, danger 3.3:1, info 3.3:1. The Severity and Status values
   on the list are exactly those colours, so "Low" and "In Progress" were the hardest things on screen
   to read. Every value below is measured at >= 4.5:1 on #FFFFFF, which is what a 13px label needs. */
:root {
  --font-sans: 'Noto Sans Thai', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bg: #F7F8FA;
  --surface: rgba(255,255,255,0.72);
  --surface-solid: #FFFFFF;
  --surface-hover: rgba(231,235,241,0.90);
  --surface-elevated: #F5F5F7;
  --border: rgba(0,0,0,0.10);
  --border-strong: #D1D5DB;
  --text-primary: #111827;
  /* One step darker than the mockup: 7.6:1 instead of 4.8:1, which leaves `--text-muted` room to sit
     safely above 4.5:1 rather than the 2.5:1 the two levels were squeezed into. */
  --text-secondary: #4B5563;
  /* 5.9:1 on white and 4.9:1 on the table header's own background — the mockup's #9CA3AF measured
     2.5:1 there, which is what the column headers and every field hint were rendered in. */
  --text-muted: #5F6773;
  --brand: #0051C3;
  --brand-hover: #003D99;
  /* Deeper than the mockup's #34C759 / #FF9500, which are fill colours: as 13px text on their own 12%
     tint they measured 2.0:1 and 2.1:1. These measure 5.9:1 and 5.4:1 on exactly that tint. */
  --success: #146B34;
  --warning: #A34708;
  --danger: #B91C1C;
  --info: #1D4ED8;
  --nav-bg: rgba(255,255,255,0.92);
  --nav-border: rgba(0,0,0,0.10);
  --titlebar-bg: rgba(255,255,255,0.86);
  --glass-blur: 20px;
  --glass-saturate: 180%;
  --radius-glass: 4px;

  /* Scrollbar thumb. Deliberately NOT a text colour: it was `--text-muted`, which stopped being a pale
     grey when the contrast pass darkened that token, and every scrollbar turned into a dark bar competing
     with the content. A translucent grey dims on both themes and never needs a second value per theme. */
  --scrollbar-thumb: rgba(0,0,0,0.16);
  --scrollbar-thumb-hover: rgba(0,0,0,0.32);

  /* The brand blue-to-violet gradient, defined once: the ISS mark, the wordmark and the primary button
     all mean "this is the brand", so they cannot be allowed to drift apart. */
  --brand-gradient: linear-gradient(135deg, #3B82F6, #8B5CF6);
}

.dark {
  --bg: #0B1120;
  --surface: #0E192A;
  --surface-solid: #111827;
  --surface-hover: rgba(31,41,55,0.80);
  --surface-elevated: #152238;
  --border: rgba(255,255,255,0.08);
  --border-strong: #374151;
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  /* #636366 is iOS systemGray and measured 2.6:1 on the list's column headers — the same failure as the
     light theme's muted step, in the other direction. systemGray2 keeps the "muted" step below
     `--text-secondary` while clearing 4.5:1 on both the page and the header backgrounds. */
  --text-muted: #8E8E93;
  --brand: #3B82F6;
  --brand-hover: #60A5FA;
  --success: #30D158;
  --warning: #FF9F0A;
  --danger: #FF453A;
  /* iOS blue, but its 12% tint over this theme's card is a dark navy that dragged the "New" badge down
     to 4.2:1 — the same fill-colour-as-text trap as in the light theme, one step lighter here. */
  --info: #3B9BFF;
  --nav-bg: #0E192A;
  --nav-border: rgba(255,255,255,0.06);
  --titlebar-bg: #0E192A;

  /* Same 16% of the opposite end of the ramp, so the two themes read the same. */
  --scrollbar-thumb: rgba(255,255,255,0.16);
  --scrollbar-thumb-hover: rgba(255,255,255,0.32);
}