/* HNO Paunsdorf — design tokens. See /DESIGN.md (repo root) for the rules.
   Zero hardcoded hex in templates — everything downstream references these. */

/* ---- Fonts (self-hosted WOFF2, latin subset incl. German umlauts) --------
   Body: Atkinson Hyperlegible 400/700 + 400 italic.
   Headings: Libre Franklin 600/700 (variable — one file, weight axis 600-700).
   Metric-matched fallback: on font-display: swap the fallback shows first; a
   size-adjust on the fallback face keeps the swap from reflowing. Atkinson's
   x-height is large, so system-ui needs size-adjust ~0.94; Libre Franklin
   pairs with a slightly condensed fallback (size-adjust ~0.97). Tuned by eye
   against the real faces — see .u-fallback-* below. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 600 700; /* variable file carries the weight axis */
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
}

/* Metric-matched fallbacks (size-adjust keeps swap from reflowing text).
   Reference these families in the font stack, not raw system-ui. */
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Segoe UI"), local("Arial");
  size-adjust: 94%;
  ascent-override: 90%;
  descent-override: 22%;
}
@font-face {
  font-family: "Franklin Fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 97%;
}

:root {
  /* ---- Colour ---- */
  --bg: #ffffff;
  --surface: #f4f7fb;
  --border: #e6eef6;
  --ink: #103050;
  --heading: #1c4368;
  --muted: #3d5674;
  --brand: #2080c0;         /* large / UI / decorative ONLY */
  --action: #1a6a9e;        /* links (always underlined) */
  --action-hover: #14567f;  /* button/action hover (alias of --hover) */
  --hover: #14567f;
  --navy-900: #0e2a44;      /* deep contrast band bg (pre-footer CTA) — white = AAA */
  --on-navy: #eef4fa;       /* text on the deep navy band */
  --accent-warm: #b5843e;   /* graphic accent ONLY */
  --success: #1c7a4d;
  --error: #b3261e;

  /* ---- Type families ---- */
  --font-body: "Atkinson Hyperlegible", "Atkinson Fallback", system-ui, sans-serif;
  --font-head: "Libre Franklin", "Franklin Fallback", system-ui, sans-serif;

  /* ---- Fluid type scale (base 18px in rem, ratio 1.25) ---- */
  --text-sm:   clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --text-base: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --text-md:   clamp(1.406rem, 1.35rem + 0.28vw, 1.563rem);   /* base * 1.25   */
  --text-lg:   clamp(1.758rem, 1.68rem + 0.39vw, 1.953rem);   /* base * 1.25^2 */
  --text-xl:   clamp(2.197rem, 2.09rem + 0.53vw, 2.441rem);   /* base * 1.25^3 */
  --text-2xl:  clamp(2.35rem, 1.95rem + 1.7vw, 3.05rem);      /* interior banner h1 */
  --text-hero: clamp(2.25rem, 1.6rem + 3.2vw, 3.4rem);

  --leading-body: 1.6;
  --leading-head: 1.15;

  /* ---- Radii ---- */
  --radius-input: 4px;
  --radius-btn: 6px;
  --radius-card: 10px;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Measure ---- */
  --measure: 65ch;

  /* ---- Header height (two-tier: utility bar + main row) ----
     Used for scroll-margin-top on anchored landings so #hash targets clear
     the sticky-ish header instead of hiding beneath it. */
  --header-h: 8rem;

  /* ---- Motion timings (load reveal) ---- */
  --reveal-1: 0.1s;
  --reveal-2: 0.2s;
  --reveal-3: 0.3s;

  /* ---- Elevation (dropdown pop) — ink at low alpha ---- */
  --shadow-pop: 0 8px 24px rgba(16, 48, 80, 0.12);
}