/* Brand values taken from the designers' vector artwork, docs/logo/vector/.
   These are the exact fills in that file, not samples off a JPEG.

   The logo itself is not themed here. The designers drew a positive and a
   negative version, and the negative is not a recolour of the positive, so
   dark mode swaps which of the two is displayed rather than retinting one.
   --logo-positive and --logo-negative below are that switch; base.css applies
   them. */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --fg: #0f223b;
  --surface: #f2f2f4;
  --rule: #dcdce2;
  --slate: #3f4f62;      /* 8.38:1 on --bg, for secondary text */

  --red: #dc0d15;        /* fills, bars, large display type */
  --red-text: #dc0d15;   /* body-size text; diverges from --red in dark mode */

  --logo-positive: inline;
  --logo-negative: none;

  --display: 'Oswald', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --ui: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --nav-h: 4.25rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --edge: max(var(--gutter), calc((100% - 78rem) / 2));
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Dark values live in a single custom-property block applied from two
   selectors: the OS preference (only when the visitor has not chosen), and an
   explicit choice. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #161d29;
    --fg: #f4f1ea;
    --surface: #0d121b;
    --rule: #2a3444;
    --slate: #9aa3b2;
    --red: #dc0d15;
    --red-text: #e26873;   /* 5.20:1 on --bg; --red is only 3.31:1 */
    --logo-positive: none; /* the designers' negative artwork takes over */
    --logo-negative: inline;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #161d29;
  --fg: #f4f1ea;
  --surface: #0d121b;
  --rule: #2a3444;
  --slate: #9aa3b2;
  --red: #dc0d15;
  --red-text: #e26873;
  --logo-positive: none;
  --logo-negative: inline;
}