/*
 * Design tokens from docs/28-ui-design-spec.md, as HSL triplets (no hsl()
 * wrapper) so Tailwind's `hsl(var(--x) / <alpha-value>)` opacity modifiers
 * work. One source of truth for every surface (employee app, admin
 * console, ops console) - edit here, not per app.
 *
 * Dark mode `--brand-dark`, `--brand-tint`, `--accent`, `--success`,
 * `--warning`, and `--danger` are recalibrated from the doc's literal hex
 * values (not just re-hued) to hold WCAG AA contrast on the navy surface -
 * verified by hand. `--brand-dark` in particular is a distinct shade from
 * `--brand` for dark-mode solid button fills specifically: white text on
 * the doc's literal #4F86C6 only reaches 3.78:1 (fails AA's 4.5:1 for
 * normal text), so button fills use `--brand-dark` (#3E72AE, 4.97:1) while
 * `--brand` stays #4F86C6 for links/active-nav/icons, where it's fine.
 *
 * `--brand` and `--accent` were cross-checked against the SE&DS Technology
 * company logo (packages/config/brand/) by pixel-sampling the actual PNG,
 * not eyeballing: #295D89 blue and #EFBF06 gold, both within a fraction of
 * a percent of the values already here - no change needed, the mark and
 * the tokens already agree. `--accent-code` is new: the logo's "__init__"
 * orange (#E85429 exactly), recalibrated per theme the same way as
 * `--brand-dark` above, since the true value only reaches 3.66:1 on the
 * light surface (fails AA) - light mode darkens it to #CB3E16 (4.95:1),
 * dark mode lightens it slightly to #E95B32 (4.98:1), both verified
 * against the worse of --surface/--panel in their theme, not just one.
 */

:root {
  --brand: 210 54.5% 34.5%;         /* #285888 SEADS Blue */
  --brand-dark: 210 55.2% 26.3%;    /* #1E4368 hover/pressed */
  --brand-tint: 207.7 41.9% 93.9%;  /* #E9F0F6 selected rows, subtle fills */
  --brand-text: 210 54.5% 34.5%;     /* #285888 brand as text (links, active nav) */
  --accent: 47.6 100% 45.5%;        /* #E8B800 SEADS Gold - sparing use only */
  --accent-code: 13.3 80.4% 44.1%;  /* #CB3E16 - the "__init__" orange, AA-safe on light */
  --ink: 0 0% 13.3%;                /* #222222 body text */
  --muted: 0 0% 34.9%;              /* #595959 meta/secondary text */
  --surface: 0 0% 100%;             /* #FFFFFF page ground */
  --panel: 210 44.4% 96.5%;         /* #F2F6FA cards, table striping */
  --border: 214.3 31.8% 91.4%;      /* #E2E8F0 hairlines, dividers */
  --success: 151.3 46.9% 28.8%;  /* #276C4B healthy, paid, within budget: AA 4.5 on brand-tint (#352) */
  --warning: 42.7 88.7% 38.2%;      /* #B8860B thresholds, nearing a cap */
  --warning-text: 42.5 89% 28.6%;   /* #8A6408 warning as text and badges: AA (#250) */
  --danger: 5.5 58.9% 43.9%;        /* #B23A2E blocks, violations, destructive */

  --radius: 0.5rem;
  --motion-duration: 175ms;
  --brand-fill: 210.0 54.5% 34.5%;  /* #285888 solid fills, white text on top (#352) */
  --brand-fill-hover: 210.0 55.2% 26.3%;  /* #1E4368 fill hover/pressed (#352) */
  --danger-fill: 5.5 58.9% 43.9%;  /* #B23A2E destructive fill, white text 5.94:1 (#352) */
}

.dark {
  --brand: 212.3 51.1% 54.3%;       /* #4F86C6 - links/active-nav/icons */
  --brand-dark: 212.1 47.5% 46.3%;  /* #3E72AE - button fills (AA-safe) */
  --brand-tint: 213.8 47% 16.3%;    /* #16273D */
  --brand-text: 212 53.4% 62.2%;     /* #6B9BD2 brand as text: AA on brand-tint and panel (#250) */
  --accent: 46.7 86.8% 55.3%;       /* #F0C42A, nudged for visibility on navy */
  --accent-code: 13.4 80.6% 55.5%;  /* #E95B32 - the "__init__" orange, AA-safe on navy */
  --ink: 210 30.8% 94.9%;           /* #EEF2F6 */
  --muted: 211 20.3% 72%;           /* #A9B7C6 */
  --surface: 211 52.7% 10.8%;       /* #0D1B2A social-kit navy */
  --panel: 214.5 52.6% 14.9%;       /* #12233A */
  --border: 211.1 41.5% 25.5%;      /* #26405C */
  --success: 151.8 41.8% 52.2%;  /* #52B888 as text: AA on panel and brand-tint (#352) */
  --warning: 39.1 66.7% 55.3%;      /* #D9A441 */
  --warning-text: 39.1 66.7% 55.3%;   /* #D9A441 */
  --danger: 8.1 65.6% 64.7%;  /* #E07A6A as text: AA on panel and brand-tint (#352) */
  --brand-fill: 212.1 47.5% 46.3%;  /* #3E72AE solid fills, white text 4.97:1 (#352) */
  --brand-fill-hover: 212.4 48.6% 41.2%;  /* #36659C fill hover, white 6.0:1 (#352) */
  --danger-fill: 5.5 58.9% 43.9%;  /* #B23A2E destructive fill, white 5.94:1 (#352) */
}