/*
 * Theme-neutral tokens and font loading.
 *
 * Colors, fonts, glows and effects live in each theme's token block
 * (css/themes/*.css). Components use only the semantic names below, so a theme
 * is a set of values plus its own decoration, never a pile of overrides.
 *
 * Semantic tokens every theme must define:
 *   --bg --fg --fg-dim --accent --accent-2 --accent-3 --error --on-accent
 *   --border --border-strong --surface
 *   --font-body --font-heading
 *   --glow-title --glow-body --glow-accent-2 --glow-box
 *   --crt --crt-size
 */

/* A face only downloads when a theme actually uses it. */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Type steps. Themes pick which step each role uses. */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5rem;    /* 24 */
  --text-2xl: 2rem;     /* 32 */
  --leading: 1.5;

  /* Spacing. --line is one line of body text; horizontal padding is in ch so
     monospace text lands on a character grid. */
  --line: 1.5rem;
  --gap: var(--line);
  --pad-x: 2ch;
  --page-max: 120ch;

  --border-w: 1px;
  --radius: 0;

  --transition: 0s;
  --blink: 1.06s;
  --type-speed: 45ms; /* per character, read by typewriter.js */
}