/* Overlap design tokens. Every colour, font and timing used by the site comes from here.
   Light is the default; dark follows the system. Contrast ratios: docs/contrast.md (npm run contrast). */
:root {
  --paper: #F6F2EA;
  --raised: #EDE7DA;
  --ink: #1F1D1A;
  --muted: #5C574F;
  --rule: #D6CEBF;
  --rule-strong: #1F1D1A;
  --accent: #5B3F8F;
  --focus: #5B3F8F;
  --scrim: rgba(20, 20, 18, 0.55);

  /* Framework colours. Each framework also has a shape and a line style, so colour is never the only cue. */
  --nis2: #8A2432;
  --gdpr: #1D4F7A;
  --iso: #85570A;
  --nist: #2F6150;

  --serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --sans: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;

  --radius: 2px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --tap: 44px;
  --tap-primary: 48px;

  --t-line: 600ms;
  --t-ring: 400ms;
  --t-panel: 180ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161A1D;
    --raised: #1E2327;
    --ink: #ECE6DA;
    --muted: #A39C90;
    --rule: #333A40;
    --rule-strong: #ECE6DA;
    --accent: #CDB8F0;
    --focus: #CDB8F0;
    --scrim: rgba(0, 0, 0, 0.65);
    --nis2: #E58A78;
    --gdpr: #82B4E0;
    --iso: #DDB060;
    --nist: #92C4A3;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #161A1D;
  --raised: #1E2327;
  --ink: #ECE6DA;
  --muted: #A39C90;
  --rule: #333A40;
  --rule-strong: #ECE6DA;
  --accent: #CDB8F0;
  --focus: #CDB8F0;
  --scrim: rgba(0, 0, 0, 0.65);
  --nis2: #E58A78;
  --gdpr: #82B4E0;
  --iso: #DDB060;
  --nist: #92C4A3;
  color-scheme: dark;
}