/* ============================================
   Kabal Design AS — variabler.css
   Tema: Forhave. Design-tokens i to lag:
   primitiver (råverdier) og semantiske (roller).
   ============================================ */

:root {

  /* ---------- Primitiver: paletten ---------- */
  --flaskegronn: #004940;
  --malurt: #71785F;
  --papir: #F6F1E7;
  --amber-glass: #B98756;
  --torv: #2B2A26;
  --gronn-te: #E3EAE4;
  --hvit: #FFFFFF;

  /* Avledede nyanser */
  --flaskegronn-dyp: #00332D;      /* hover på mørk flate */
  --amber-dyp: #A06F3E;            /* hover på knapp */
  --papir-dyp: #EDE6D6;            /* kant på lys flate */
  --papir-marg: #E3DAC5;           /* margflaten utenfor siden på brede skjermer */

  /* ---------- Store skjermer ---------- */
  --side-maks: 1800px;             /* tak for sidens bredde */
  --seksjon-maks-h: 60rem;         /* tak for fullhøyde-seksjoner */

  /* ---------- Primitiver: typografi ---------- */
  --font-overskrift: "Baskervville", Georgia, serif;
  --font-brodtekst: "Manrope", -apple-system, sans-serif;

  --str-h1: 2.1rem;
  --str-h2: 1.6rem;
  --str-h3: 1.15rem;
  --str-sitat: 1.35rem;
  --str-brodtekst: 1rem;
  --str-liten: 0.85rem;
  --str-kicker: 0.78rem;

  --linje-overskrift: 1.15;
  --linje-brodtekst: 1.6;

  /* ---------- Primitiver: 8-punkts skala ---------- */
  --rom-1: 0.5rem;
  --rom-2: 1rem;
  --rom-3: 1.5rem;
  --rom-4: 2rem;
  --rom-5: 2.5rem;
  --rom-6: 3rem;
  --rom-8: 4rem;
  --rom-10: 80px;
  --rom-12: 96px;

  /* ---------- Primitiver: struktur ---------- */
  --bredde-side: 1120px;
  --bredde-tekst: 60%;
  --header-h: 72px;
  --radius: 6px;

  /* ---------- Semantiske roller ---------- */
  --bg-side: var(--papir);
  --bg-kapittel-mork: var(--flaskegronn);
  --bg-kapittel-dempet: var(--malurt);
  --bg-kort: var(--gronn-te);

  --tekst: var(--torv);
  --tekst-paa-mork: var(--papir);
  --tekst-overskrift: var(--flaskegronn);

  --kant: var(--papir-dyp);
  --kant-felt: var(--torv);

  --knapp-bg: var(--amber-glass);
  --knapp-bg-hover: var(--amber-dyp);
  --knapp-tekst: var(--hvit);

  --lenke: var(--flaskegronn);
}

@media (min-width: 768px) {
  :root {
    --str-h1: 3.2rem;
    --str-h2: 2.2rem;
    --str-h3: 1.25rem;
    --str-sitat: 1.7rem;
  }
}