/* variabler.css — alle designvalg samlet på én plass.
   Vil du endre en farge? Gjør det her, og det gjelder overalt i appen.
   CSS-variabler definert på :root er tilgjengelige i alle andre CSS-filer.

   ÉN palett — ingen palett-bytte lenger. Hele fargesystemet bygges fra de
   tre rå fargene rett under. Alt annet (dempet tekst, kantlinjer, tekst
   oppå aksent-flater) er REGNET UT fra disse tre med color-mix(), så du
   trenger så godt som aldri å style dem manuelt. Vil du endre paletten,
   endre kun de tre variablene under — resten justerer seg selv. */


   @font-face {
  font-family: 'Spartan';
  src: url('/fonts/SpartanMB-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spartan';
  src: url('/fonts/SpartanMB-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spartan';
  src: url('/fonts/SpartanMB-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- RÅFARGER --- */
  --hvit:  #FFFCF7;   /* bakgrunn og kortflate */
  --svart: #1E0C14;   /* tekst, og de få flatene som alltid skal være mørke */
  --blaa:  #8CB1F4;   /* aksent — knapper, aktive chips, kant rundt kort */


  /* --- BAKGRUNN / TEKST ---
     Hele siden er lys nå (ikke lys-kort-mot-mørk-bakgrunn som før), så
     --paper/--graa/--flate-1/--flate-2 gjelder likt overalt — ingen egen
     "lys overflate"-variant trengs lenger inni kort/modal. */

  --paper: var(--svart);   /* primær tekst */
  --graa:  color-mix(in srgb, var(--svart) 55%, var(--hvit) 45%);   /* dempet tekst */

  --flate-1: var(--blaa);                                          /* kortflate = bakgrunn */
  --flate-2: color-mix(in srgb, var(--svart) 8%, var(--hvit) 92%);  /* kantlinjer, inputs, innfelt panel */


  /* --- AKSENT --- */
  --aksent:    var(--blaa);
  --sekundaer: var(--blaa);   /* ingen egen sekundærfarge — gjenbruker aksenten */

  /* Tekst/ikon oppå en flate FYLT med aksenten (aktiv chip, primærknapp) —
     aksenten er lys, så mørk tekst leser klart best oppå den. */
  --aksent-kontrast: var(--svart);

  /* Aksenten brukt som REN TEKST/IKON oppå --hvit (følg-knapp, "lagret"-
     hjertet i modalen) — litt mørknet mot svart, siden den lyse aksenten
     alene er for lys til å lese godt som liten tekst på hvitt. */
  --aksent-tekst: color-mix(in srgb, var(--blaa) 55%, var(--svart) 45%);


  /* --- FAST MØRK — kun til flater OPPÅ vilkårlige eventbilder
     (kategori-badge, gjentas-ribbon) der vi ikke styrer hva som ligger
     bak. Skal ALLTID være mørk, uansett at resten av siden nå er lys —
     ellers blir badgen uleselig mot lyse bilder. Se .kort-kategori i
     stil.css. */
  --ink:         var(--svart);
  --merke-tekst: var(--hvit);



/* --- TYPOGRAFI --- */
--font-tittel: 'Spartan', sans-serif;
--font-tekst: 'Spartan', sans-serif;


  /* --- SPACING ---
     Vi bruker et konsistent sett med størrelser.
     rem er relativt til rot-elementets font-size (typisk 16px),
     så 1rem = 16px, 0.5rem = 8px osv. */
  --gap-s:  0.5rem;   /*  8px */
  --gap-m:  1rem;     /* 16px */
  --gap-l:  1.5rem;   /* 24px */
  --gap-xl: 2rem;     /* 32px */

  /* Topbar-høyde på desktop (gap-l + linjehøyde for 1.75rem logo + gap-s) */
  --topbar-h: 74px;

  /* Bunn-nav-høyde på mobil (< 900px) — se stil.css */
  --bunn-nav-h: 64px;


  /* --- AVRUNDING --- */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 0px;
}