/* ============================================================
   tokens.css — Design-tokens for mikkel-heiberg.dk (redesign)
   Fase 1. Monokrom identitet: ingen accentfarve.
   Interaktion løses med sort/hvid-inversion.
   ============================================================ */

:root {
  /* ---- Farver (monokrom) ---- */
  --bg:            #FFFFFF;
  --fg:            #0F0F0F;
  --fg-muted:      rgba(15, 15, 15, 0.55);
  --fg-faint:      rgba(15, 15, 15, 0.38);
  --line:          rgba(15, 15, 15, 0.12);
  --line-strong:   rgba(15, 15, 15, 0.28);
  --inv-bg:        #0F0F0F;
  --inv-fg:        #FFFFFF;
  --focus:         #0F0F0F;

  /* ---- Typografi ---- */
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;   /* selvhostet, rigtig skæring — ikke syntetisk */

  --fs-xs:      12px;
  --fs-sm:      15px;
  --fs-body:    18px;
  --fs-md:      20px;
  --fs-lg:      24px;
  --fs-xl:      40px;
  --fs-2xl:     54px;
  --fs-display: clamp(40px, 6vw, 88px);

  --lh-body:    1.4;
  --lh-tight:   1.2;
  /* 0.8 = referencens målte forhold (43.2/54 og 32/40) på de store
     sektionsoverskrifter. Heroens H1 bruger IKKE denne — den kører 1.4. */
  --lh-display: 0.8;

  --ls-body:    -0.04em;
  --ls-display: -0.05em;
  --ls-label:    0.08em;

  /* ---- Layout ----
     Fluid som referencen: ingen max-width, faste side-gutters.
     Container = clientWidth - 2 * --page-gutter                      */
  --page-gutter:        20px;   /* masthead, tekstsektioner, alle bredder */
  --work-gutter-mobile: 10px;   /* kun projektsektionen ≤768 (målt)       */
  --hero-measure:      600px;   /* heroens egen tekstbredde (målt)        */
  --header-h:           64px;
  /* Sticky menurække-højde. CSS-fallback (dokumenteret forventet ~41+1px);
     JS opdaterer med den faktisk målte højde ved load/resize.            */
  --sticky-nav-h:       44px;

  --space-xs:  24px;
  --space-s:   48px;
  --space-m:   96px;
  --space-l:  128px;
  --space-xl: 160px;

  --radius: 0px;

  /* ---- Motion ---- */
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fase 7 — fælles animationssystem. De ældre --dur-tokens og --ease bevares
     som aliaser, så intet ældre brud opstår; nye/migrerede regler bruger
     --motion-fast/normal/slow + --ease-out/--ease-standard. */
  --motion-fast:   120ms;   /* hover/focus-feedback: underline, knap, filter, link */
  --motion-normal: 220ms;   /* menu, nav-kryds, kort-zoom, scroll-reveals */
  --motion-slow:   420ms;   /* reserve — kun undtagelsesvist, aldrig hover */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* reveals/entré (deceleration) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* hover/focus/feedback (ind-ud) */
}

/* Breakpoints (media queries skrives eksplicit):
   809px (mobil/tablet-skifte, målt på referencen) · 1280px (4 kolonner)
   --page-gutter forbliver 20px på ALLE bredder — kun projektsektionen
   reduceres til 10px ≤768, som målt på referencen.                  */

/* Sektionsoverskrifternes målte trin på referencen: 54px ≥1200,
   40px i båndet 810–1199. Linjehøjden er 0.8 i begge trin.          */
@media (max-width: 1199px) {
  :root { --fs-2xl: 40px; }
}

@media (max-width: 768px) {
  :root {
    --fs-body: 15px;
    --fs-xl:   32px;
    --space-m:  64px;
    --space-l:  88px;
    --space-xl:104px;
  }
}