/*
 * tokens.css
 * Alle design-tokens fra design-instruksjon.md, samlet ett sted.
 * Brukes konsekvent gjennom hele nettstedet via var(--token).
 */

:root {
  /* --- Fargepalett: varm, redaksjonell newsroom-estetikk --- */
  --paper:        #FBF8F3; /* varm off-white, hovedbakgrunn */
  --paper-tint:   #F2ECE1; /* svak seksjonsbakgrunn for variasjon */
  --ink:          #1A1614; /* varm naer-svart, brodtekst og overskrifter */
  --muted:        #6B635C; /* varm graa, sekundaertekst og bildetekst */
  --line:         #E5DED4; /* haarfine skillelinjer og kantlinjer */
  --accent:       #E0341D; /* vermillion, aksent og CTA */
  --accent-hover: #B82813; /* moerkere vermillion ved hover, og for liten tekst paa paper */
  --ink-invert:   #FBF8F3; /* tekst paa moerk eller aksentfarget flate */

  /* --- Typografi --- */
  /* Display: Lora. Brodtekst: Hanken Grotesk. Begge dekker ae, oe, aa. */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Flytende typografi med clamp(): skalerer jevnt mellom mobil og desktop.
     Skalaen er bevisst dempet, slik at overskrifter leder uten å dominere:
     h1 har gammel h2-størrelse, h2 gammel h3, og så videre nedover. */
  --step-fluid-h1: clamp(2rem,   3.5vw + 1rem, 3.5rem);
  --step-fluid-h2: clamp(1.4rem, 1.5vw + 1rem, 2rem);
  --step-fluid-h3: clamp(1.2rem, 0.7vw + 1rem, 1.5rem);
  --step-fluid-h4: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
  --step-body:     clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
  --step-small:    0.85rem;

  /* --- Mellomrom og rutenett --- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem; /* vertikal rytme mellom store seksjoner paa desktop */

  --content-max: 1240px;   /* maks bredde paa innholdscontainer */
  --measure:     65ch;     /* maks bredde paa lengre tekstblokker */
  --gutter:      clamp(1.25rem, 5vw, 5rem); /* sidemarg, vokser med skjerm */

  /* --- Oevrig --- */
  --radius:      14px;     /* rolig, redaksjonell avrunding */
  --radius-s:    8px;
  --shadow:      0 1px 2px rgba(26, 22, 20, 0.04), 0 12px 32px rgba(26, 22, 20, 0.08);
  --shadow-soft: 0 1px 2px rgba(26, 22, 20, 0.03), 0 6px 18px rgba(26, 22, 20, 0.05);
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h:    74px;
}