/* Design tokens: the colours, the fonts and the layout. Archivo displays,
   Source Serif 4 sets the body text, IBM Plex Mono the labels.

   Accent roles. --accent marks rules, glyphs and borders, and gives 3:1 on
   the background. --accent-strong is for hover, focus and the current
   state, and gives 4.5:1. --accent-fill is the accent as a background, and
   only --accent-fill-ink goes on it. The dark theme lightens the accent,
   because #0000cd gives 1.7:1 there.

   Line roles. --line draws a divider, which gives no data. --line-strong
   draws a shape that gives data, and gives 3:1.

   Themes: :root is light. The media block applies dark if the device asks
   and nobody made a choice, and [data-theme="dark"] applies it on request. */

:root {
  color-scheme: light;
  --paper: #f3f5f6;
  --surface: #fbfcfc;
  --ink: #0f1926;
  --muted: #43556a;
  --line: #becad5;
  --line-strong: #748495;
  --accent: #0000cd;
  --accent-strong: #0000a0;
  --accent-fill: #0000cd;
  --accent-fill-ink: #ffffff;
  --hairline: rgba(15, 25, 38, 0.2);

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --w-content: 1060px;
  --w-prose: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d141d;
    --surface: #131d29;
    --ink: #edf2f6;
    --muted: #a3b4c5;
    --line: #34455a;
    --line-strong: #77889a;
    --accent: #6a6aff;
    --accent-strong: #9191ff;
    --accent-fill: #9191ff;
    --accent-fill-ink: #0d141d;
    --hairline: rgba(237, 242, 246, 0.22);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d141d;
  --surface: #131d29;
  --ink: #edf2f6;
  --muted: #a3b4c5;
  --line: #34455a;
  --line-strong: #77889a;
  --accent: #6a6aff;
  --accent-strong: #9191ff;
  --accent-fill: #9191ff;
  --accent-fill-ink: #0d141d;
  --hairline: rgba(237, 242, 246, 0.22);
}