/* "swiss": an alternate child theme on the Fluid base v2
   (spec _docs/plans/base-v2.md §15). One grotesk family, a heavy display
   over a light lede, an off-centre column with a start-side rail, ink
   labels instead of accent eyebrows. Fonts: themes/fonts/archivo.css (or
   dist/fluid-fonts-archivo.min.css). Link after the base: fluid.min.css,
   then this file. */
@layer reset, tokens, base, layouts, components, themes, utilities;

@layer themes {
  :root {
    --font-heading: "Archivo Variable", "Helvetica Neue", "Nimbus Sans", Arial, sans-serif;
    --font-body: var(--font-heading);
    --accent: oklch(47% 0.21 264);          /* ultramarine; white on it ≈ 6.8:1 */
    --neutral-tint: oklch(50% 0.006 85);
    --type-ratio: 1.5;                      /* h1 ≈ 5× body on desktop */
    --weight-display: 760;
    --display-max: 11rem;
    --measure: 65ch;
    --container-content: 90rem;
    --space-section: clamp(4.5rem, 2.613rem + 8.387vi, 11rem);   /* 72 → 176 */
    --space-gutter: clamp(2.5rem, 0.9032rem + 7.097vi, 8rem);   /* both sides: 20 → 64px a side */
    --rail: 13rem;                          /* the column sits off-centre; the rail is free for labels */
    --toc-marker: decimal-leading-zero;
    --toc-dock-font: var(--font-body);
  }

  .display, .hero__headline {
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-variation-settings: "wdth" 92;
  }
  h1 { letter-spacing: -0.04em; }
  h2 { font-weight: 700; letter-spacing: -0.03em; }
  h3 { font-weight: 600; }

  :is(.eyebrow, h5, h6, thead th, .toc__label) {
    color: var(--color-text);
    letter-spacing: 0.1em;
    font-variation-settings: "wdth" 112;
  }

  .lede { font-family: var(--font-body); font-weight: 300; }

  /* No italic in the display: emphasis by weight. */
  blockquote, :is(h1, h2, h3, .display) em { font-style: normal; }
  :is(h1, h2, h3, .display) em { font-weight: 400; }

  .section__head { --section-rule: 3px; }

  /* At ratio 1.5 step 4 is ~100px: heavy numerals that wide overrun a
     four-column stats row, so they step down one. */
  .stat__value { font-size: var(--step-3); }
}