/* Avløserkortet — design tokens
 * Status: Fase 2 fra Terjes leveranse 2026-05-19. Klar for Fase 3 (design-reference.html).
 * DNA: offentlig kompetansebevis (Landbruksdirektoratet × HK-dir-univers).
 * Klient-input: Terje 2026-05-19 (logo + Landskap + StyleGuide-Fargekoder.docx).
 */

:root {
  /* ─── Color: Terjes 7 + 3 supplement ─────────────────
     Terjes 7 er primær. Sindres supplement (error/success/
     focus) er valgt for å passe Terjes palett, ikke konkurrere. */

  /* Brand (Terje) */
  --color-brand-deep:   #1e5842;  /* Mørk grønn felt — section-bånd, hero-band, kontakt, footer-accent */
  --color-brand-logo:   #2d766d;  /* Logo-symbol teal — KUN i logo-kontekst, ikke som UI-farge */
  --color-cta:          #09c066;  /* Lys grønn — knapper, CTA-pille, valgt-markør, suksess */
  --color-cta-hover:    #06a456;  /* Sindre-supplement: 12% mørkere på `--color-cta` for hover */

  /* Surface (Terje) */
  --color-ink:          #0a0a0a;  /* Headings + body på lys bakgrunn */
  --color-ink-mute:     #5c5c5c;  /* Meta, kicker, secondary text — mute av ink */
  --color-paper:        #ffffff;  /* Cards, hovedoverflate */
  --color-bg:           #f7f7f7;  /* Grå bakgrunn — page, mellom-flate */
  --color-line:         #e0e0e0;  /* Borders, dividers — subtilt */

  /* Logo shadow-kort (Terje) */
  --color-logo-shadow:  #d9d9d9;  /* Bak-kort i logo-symbol. KUN i logo. */

  /* Supplement: status-farger (Sindre, valgt for å passe palett)
     OBLIGATORISK/KRITISK er ikke i Terjes palett. Bruker en varm
     burnt-orange i stedet for april sin #800001, fordi den
     konkurrerer mindre med grønnene. Brukes KUN funksjonelt på
     3px left-rail eller badge — aldri stor flate. */
  --color-critical:     #800001;  /* Brun-rød — bekreftet i Terjes Landskap_01.svg. Kun funksjonell (rail/badge/error), aldri flate. */
  --color-info:         #1e5842;  /* Bruk brand-deep — ikke separat blå */
  --color-focus:        #09c066;  /* Focus-ring matcher CTA */


  /* ─── Type: Roboto, ingen alternativer ────────────────
     Bekreftet at SCORM-kursene bruker Roboto, og Terjes
     assets bruker Roboto. Forsiden, LMS-shell og kursinnhold
     skal være visuelt sammenhengende. */

  --font: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Vekt: 400 body, 500 headings. Aldri 700/800. */
  --fw-body:    400;
  --fw-heading: 500;
  --fw-meta:    500;

  --lh-heading: 1.15;
  --lh-body:    1.6;

  /* Type-scale */
  --fs-h1:    clamp(2rem, 5vw, 3rem);     /* 32–48px */
  --fs-h2:    clamp(1.5rem, 3vw, 2rem);   /* 24–32px */
  --fs-h3:    1.25rem;                    /* 20px */
  --fs-body:  1.0625rem;                  /* 17px — godt over 16, mobil-vennlig */
  --fs-small: 0.875rem;                   /* 14px */
  --fs-meta:  0.75rem;                    /* 12px — uppercase kicker */


  /* ─── Space — 4-step grid ────────────────────────────
     8 / 16 / 24 / 48. Hvis du reach for 12/20/32, det er en feil. */

  --sp-sm: 0.5rem;   /*  8px */
  --sp-md: 1rem;     /* 16px */
  --sp-lg: 1.5rem;   /* 24px */
  --sp-xl: 3rem;     /* 48px */


  /* ─── Radius — 6px / pill ────────────────────────────
     6px på cards (kompetansebevis-univers, ikke for myke).
     9999 på pills (CTA-pille er kanonisk i Terjes modul-cover). */

  --r-card: 6px;
  --r-pill: 9999px;


  /* ─── Shadow — én subtil ────────────────────────────
     Institutional bruker neppe shadow. Subtilt lift på hover
     av cards. Ingen permanent skygge. */

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
            0 4px 12px rgba(0, 0, 0, 0.04);
}