/* Linked directly by the templates, after palettes.css and before pattern.css.
   See the note at the top of site.css for why there is no @import chain. */
/* ============================================================================
   Everything that is not colour. The palette comes from palettes.css, which is
   generated from the design system's own twenty-four themes; set
   data-palette="<id>" on <html> to switch and every component follows, because
   nothing below hard-codes a colour.
   ========================================================================== */
:root {
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:  Karla, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The old direction boxed every element in a hairline frame. The pattern is
     meant to run across sections now, so frames are used sparingly. */
  --radius: 0px;
  --frame: 1px solid var(--line);
  --frame-lit: 1px solid var(--accent);

  --gut:  clamp(20px, 3.4vw, 52px);
  --gap:  clamp(14px, 1.8vw, 22px);
  --sect: clamp(38px, 5vw, 74px);
  --max: 1440px;

  --glass: color-mix(in srgb, var(--paper) 93%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 62%, transparent);

  /* consumed by the SVG the pattern engine emits */
  --pat-ink:     var(--ink);
  --pat-accent:  var(--accent);
  --pat-accent2: var(--accent-2);
  --pat-paper:   var(--paper);
  --pat-line:    currentColor;

  --good: var(--pat-3);
  --warn: var(--pat-4);
  --bad:  var(--pat-1);
}