/* Design tokens from BRAND_SYSTEM.md §4 (type) and §5 (color).
   Palette is approved; exact hex values are working values (B-3).
   Typeface is an interim recommendation (§4.2); final choice is B-1. */
:root {
  /* Color — BRAND_SYSTEM.md §5.1 */
  --color-ink: #16161a;
  --color-paper: #f5f1e8;
  --color-red-pen: #d93a2b;
  --color-red-pen-on-ink: #e8503f;

  /* Color — supporting neutrals, §5.2 [PROPOSED] */
  --color-ink-70: #4a4a50;
  --color-ink-45: #6a6a70;
  --color-rule: #d6d2c8;
  --color-paper-deep: #e9e6df;
  --color-white: #ffffff;

  /* Type — §4.1–4.3. Schibsted Grotesk is a stand-in pending B-1. */
  --font-family-base: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Mobile-first fluid scale, clamped to the mobile → desktop values in §4.3 */
  --font-size-hero: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --font-size-section-heading: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --font-size-subheading: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --font-size-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --font-size-small: 0.9375rem; /* 15px: smallest size for running text and links */
  --font-size-note: 0.8125rem; /* 13px: legal-style notes only, ink-70 or darker */

  /* Redesign display scale: 112 / 72 / 44 with fluid clamp (44 at 360px, 112 at 1440px and up). */
  --font-size-display: clamp(2.75rem, 1.33rem + 6.3vw, 7rem);
  --font-size-h1: clamp(2.75rem, 2.17rem + 2.6vw, 4.5rem);
  --font-size-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  --font-size-h3: clamp(1.375rem, 1.18rem + 0.55vw, 1.625rem); /* 22 mobile, 26 desktop (Figma H3) */
  --font-size-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
  --font-size-button: 1.0625rem; /* 17px */
  --line-height-display: 0.95; /* Figma Display 106/112 */
  --line-height-heading: 1.12;

  --line-height-body: 1.6;
  --measure: 72ch;
  --heading-tracking: -0.02em;
  --display-tracking: -0.035em;

  /* Spacing scale, px: 4 8 12 16 24 32 40 48 64 80 96 128 160 */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-160: 10rem;

  /* Page margins (20 mobile, 40 tablet, 80 desktop), gutters (16 / 24), page measure 1280 */
  --margin-page: 1.25rem;
  --gutter: 1rem;
  --measure-page: 80rem;
  --section-space: var(--space-64);
  --hero-space-top: var(--space-32);
  --hero-space-bottom: var(--space-64);
  --control-height: 3.5rem; /* 56px */
  --focus-ring: 3px;
}

@media (min-width: 48em) {
  :root {
    --margin-page: 2.5rem;
    --gutter: 1.5rem;
    --section-space: var(--space-80);
    --hero-space-top: var(--space-64);
    --hero-space-bottom: var(--space-48);
  }
}

@media (min-width: 80em) {
  :root {
    --margin-page: 5rem;
    --section-space: var(--space-128);
    --hero-space-top: var(--space-96);
    --hero-space-bottom: var(--space-128);
  }
}