/*
 * DSI brand theme, light and dark (DSI Brand Guide, 2024).
 *
 * Copy this file into the project and build every colour from these tokens: components use
 * var(--accent), var(--card) and so on, never a raw hex. The --dsi-* brand colours are the same in
 * both themes; everything else is redefined for dark.
 *
 * Light is the default. Dark follows the operating system unless <html data-theme="light|dark">
 * says otherwise; theme-toggle.js sets that attribute and remembers the choice. The two dark blocks
 * below must stay identical: one serves "follow the system", the other an explicit choice.
 */

:root {
  color-scheme: light;

  /* Brand colours: identical in both themes. Cyan is the guide's RGB (0, 194, 243); its printed hex #0ec1ee is a shade off. */
  --dsi-navy: #003c77;
  --dsi-blue: #007bc1;
  --dsi-cyan: #00c2f3;
  --dsi-yellow: #ffcf01;
  /* The logo's black; the guide's palette black is #000000. */
  --dsi-black: #231f20;
  /* The four colours in a row, as an accent line under a page head or along the top of a document. */
  --dsi-stripe: linear-gradient(90deg, #003c77 0 25%, #007bc1 25% 50%, #00c2f3 50% 75%, #ffcf01 75%);

  --font-brand: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Surfaces and text */
  --bg: #f3f6f9;
  --card: #ffffff;
  --fg: #1c1f24;
  --muted: #667085;
  --border: #e1e6ec;
  --border-strong: #cbd3dc;

  /* Brand roles */
  --accent: #007bc1; /* buttons, links, selected state */
  --accent-soft: #e6f2fa; /* selected rows, chips, hover fills */
  --accent-strong: #003c77; /* text on --accent-soft */
  --heading: #003c77; /* page titles, headline numbers */
  --on-accent: #ffffff; /* text on an --accent fill */
  --menu: #003c77; /* the navigation bar: navy in both themes */
  --menu-fg: rgba(255, 255, 255, 0.84);
  --menu-active: rgba(255, 255, 255, 0.14);
  --focus: #007bc1;

  /* Status: kept green, red and amber in both themes; they carry meaning, so never recolour them in brand colours. */
  --good: #1a7f4b;
  --good-soft: #e6f4ec;
  --bad: #b42318;
  --bad-soft: #fdeceb;
  --warn: #b45309;
  --warn-soft: #fdf3e4;

  /* Charts: axis lines, gridlines, and the first five series (dsi-brand.ts PALETTE has ten). */
  --chart-axis: #d8dce2;
  --chart-grid: #eef0f3;
  --series-1: #007bc1;
  --series-2: #1f9e89;
  --series-3: #003c77;
  --series-4: #ffcf01;
  --series-5: #00c2f3;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
  --radius: 12px;
}

/* Dark: DSI navy, darkened. Navy text would vanish here, so headings turn near white and DSI blue turns cyan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0b1422;
    --card: #111c2c;
    --fg: #e6eaf0;
    --muted: #98a4b5;
    --border: #1f2c3e;
    --border-strong: #324257;
    --accent: #00c2f3;
    --accent-soft: #0b2b40;
    --accent-strong: #5fd6f7;
    --heading: #f2f6fa;
    --on-accent: #06213f;
    --menu: #002b57;
    --focus: #00c2f3;
    --good: #4ade80;
    --good-soft: #14281d;
    --bad: #f87171;
    --bad-soft: #2d1719;
    --warn: #fbbf24;
    --warn-soft: #2c2312;
    --chart-axis: #324257;
    --chart-grid: #1c283a;
    --series-1: #2f9be0;
    --series-2: #3cc7ae;
    --series-3: #8fb0e0;
    --series-4: #ffcf01;
    --series-5: #00c2f3;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b1422;
  --card: #111c2c;
  --fg: #e6eaf0;
  --muted: #98a4b5;
  --border: #1f2c3e;
  --border-strong: #324257;
  --accent: #00c2f3;
  --accent-soft: #0b2b40;
  --accent-strong: #5fd6f7;
  --heading: #f2f6fa;
  --on-accent: #06213f;
  --menu: #002b57;
  --focus: #00c2f3;
  --good: #4ade80;
  --good-soft: #14281d;
  --bad: #f87171;
  --bad-soft: #2d1719;
  --warn: #fbbf24;
  --warn-soft: #2c2312;
  --chart-axis: #324257;
  --chart-grid: #1c283a;
  --series-1: #2f9be0;
  --series-2: #3cc7ae;
  --series-3: #8fb0e0;
  --series-4: #ffcf01;
  --series-5: #00c2f3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.5 var(--font-brand);
  -webkit-font-smoothing: antialiased;
}

/* The guide's type roles: Extra-Bold headline, Semi-Bold subhead, Semi-Bold Italic listing, Regular body, Light additional text. */
h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--heading);
}
h2,
h3 {
  margin: 0;
  font-weight: 600;
  color: var(--heading);
}
.listing {
  font-style: italic;
  font-weight: 600;
}
.note,
.meta {
  font-weight: 300;
  color: var(--muted);
}
a {
  color: var(--accent);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ brand signatures */

/* The stripe: 4px of DSI's four colours under a page head, or along the top of a printed page. */
.dsi-stripe {
  height: 4px;
  background: var(--dsi-stripe);
  border: 0;
}
/* A section title with a short bar of DSI yellow on its rule. */
.dsi-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(var(--dsi-yellow), var(--dsi-yellow)) left bottom / 64px 4px no-repeat;
}

/* Navigation: navy in both themes, the white logo on it, the open page marked in yellow. */
.dsi-nav {
  background: var(--menu);
  color: #ffffff;
}
.dsi-nav a {
  color: var(--menu-fg);
  text-decoration: none;
  border-radius: 8px;
}
.dsi-nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.dsi-nav a[aria-current='page'] {
  color: #ffffff;
  background: var(--menu-active);
  box-shadow: inset 3px 0 0 var(--dsi-yellow);
}
.dsi-nav :focus-visible {
  outline-color: var(--dsi-cyan);
}

/* The colour logo on light surfaces and the white one on dark: put both in the page, and each theme shows one. */
.logo-on-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-on-light {
    display: none;
  }
  :root:not([data-theme='light']) .logo-on-dark {
    display: inline-block;
  }
}
:root[data-theme='dark'] .logo-on-light {
  display: none;
}
:root[data-theme='dark'] .logo-on-dark {
  display: inline-block;
}

/* ------------------------------------------------------------------ components */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.btn {
  font: 500 0.9rem/1 var(--font-brand);
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
.btn:hover {
  border-color: var(--accent);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.chip {
  font: 500 0.8rem/1 var(--font-brand);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chip[aria-pressed='true'],
.chip.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
  font-weight: 600;
}
.input {
  font: inherit;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
}
table.data {
  width: 100%;
  border-collapse: collapse;
}
table.data th {
  text-align: left;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  padding: 6px 8px;
}
table.data td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
}
.badge-good {
  color: var(--good);
  background: var(--good-soft);
}
.badge-bad {
  color: var(--bad);
  background: var(--bad-soft);
}
.badge-warn {
  color: var(--warn);
  background: var(--warn-soft);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Printing: colours print as they are (the stripe, table heads), whatever the dialog's background setting. */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}