/* Hyperion Entities design tokens.
   These map 1:1 onto the WordPress theme.json later. Change values here, not in components. */

:root {
  color-scheme: light;

  /* Brand */
  --navy: #1c1565;          /* sampled from the logo. Links, numerals, buttons, outlines */
  --navy-deep: #120e47;     /* footer */
  --navy-hover: #2a2287;
  --navy-wash: #e7e5f1;
  --on-navy: #fff;          /* text on a --navy fill */

  /* The closing band keeps the logo's navy in both themes, so its colours are fixed */
  --band: #1c1565;
  --band-btn: #f6f3ec;
  --band-btn-ink: #1c1565;

  /* Paper and ink: warm neutrals so the indigo never sits on pure white or black */
  --paper: #f6f3ec;
  --paper-sunk: #eeeadf;
  --surface: #fbfaf6;
  --field: #fff;            /* text boxes and menus */
  --ink: #17152e;
  --ink-2: #46435b;
  --ink-3: #6a6780;
  --rule: #dad4c6;
  --rule-strong: #b8b1a1;

  /* Data (validated for colour-vision deficiency on --paper and --surface) */
  --data-1: #4a42b5;
  --data-2: #b8741a;

  /* Review-only draft labels */
  --flag: #7a4b0c;
  --flag-wash: #f6ead6;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* Shape: one radius everywhere, matching the logo's hard edges */
  --radius: 2px;

  /* Layout */
  --page-max: 76rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure: 38rem;
}

/* Dark theme: the light theme turned inside out. The page takes the colour of the ink and the text takes the
   colour of the paper, and the navy lightens so it still reads as the brand's indigo. No black, no glow.
   Light is what everyone lands on. Dark applies when the reader chooses it, or in the evening for a reader who
   hasn't chosen (the script in <head> sets data-theme on <html>; site.js handles the switch). The device's
   own light or dark setting is deliberately ignored. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #b7b2ee;
  --navy-deep: #0d0b1d;
  --navy-hover: #d3cffa;
  --navy-wash: #2a2759;
  --on-navy: #15132a;
  --paper: #15132a;
  --paper-sunk: #100e21;
  --surface: #1c1a35;
  --field: #100e21;
  --ink: #efebe1;
  --ink-2: #c5c1d6;
  --ink-3: #9d99b6;
  --rule: #2f2c4f;
  --rule-strong: #56527d;
  --data-1: #9f98f2;
  --data-2: #e0a04a;
  --flag: #e6b872;
  --flag-wash: #3a2b12;
}