/* Design-tokens for HELE billeker.no v2 — samme verdier som v1s base.css,
   videreført uendret. Ingen frie tall utenfor denne skalaen noe sted i
   koden — se ../../docs/STILGUIDE.md.

   Fargepaletten er bevisst uendret fra v1 (mørk/turkis) selv om v2s
   designutkast utforsket en lysere "Organic"-drakt — se
   ../../docs/design/. Vi tar layout-/funksjonsideer derfra, ikke fargene. */

:root{
  --bg:#1E212B;
  --card:#262A36;
  --card-hover:#2E3341;
  --card-prominent:#15161C;  /* kort som skal skille seg tydelig ut: viktig info, varsler */
  --text:#F1EFE7;
  --text-dim:#9AA0AF;
  --line:rgba(255,255,255,0.08);

  --aksent:#17BEBB;          /* merkefarge: knapper, lenker */
  --aksent-dyp:#13A6A3;
  --paa-aksent:#12241F;      /* tekst oppaa aksentfargen */
  --rod:#DC2626;             /* faktisk rødfarge (var #E4572E, en rødoransje tone som ble opplevd som oransje, se docs/ROADMAP.md) */
  --gul:#FFC93C;
  --bla:#5B8DEF;
  --gronn:#4FAE79;
  --lilla:#A78BFA;
  --rosa:#FF8FA3;

  --font-tekst:'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Baloo 2', 'Karla', system-ui, sans-serif;

  /* ---------- avstand: 4/8px-rutenett, 11 trinn ---------- */
  --space-0:2px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;

  /* ---------- avrunding: 5 trinn ---------- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:999px;

  /* ---------- skrift: 11 trinn (rot = 16px) ---------- */
  /* De tre minste trinnene økt 1px hver (var 12/13/14px) — undertekst i
     kort (spillernavn, chip-rader, "sin tur" osv.) ble opplevd som liten
     på telefon og i Teslas nettleser, som leses fra lengre avstand enn en
     vanlig telefonskjerm. Token-endring i stedet for enkeltoverstyringer
     — treffer alle stedene som bruker skalaen, se docs/STILGUIDE.md. */
  --text-2xs:0.8125rem; /* 13px */
  --text-xs:0.875rem;   /* 14px */
  --text-sm:0.9375rem;  /* 15px */
  --text-base:1rem;     /* 16px */
  --text-body:1.0625rem;/* 17px - løpende brødtekst */
  --text-md:1.125rem;   /* 18px */
  --text-lg:1.25rem;    /* 20px */
  --text-xl:1.5rem;     /* 24px */
  --text-2xl:1.875rem;  /* 30px */
  --text-3xl:2.25rem;   /* 36px */
  --text-4xl:3rem;      /* 48px */

  --leading-display:1.1;
  --leading-body:1.55;
  --leading-ui:1.25;
  --leading-display-num:1;
  --tracking-display:-0.01em;

  /* ---------- kant & skygge ---------- */
  --border-w:1px;
  --shadow-sm:0 8px 24px rgba(0,0,0,0.35);
  --shadow-md:0 16px 40px rgba(0,0,0,0.40);
  --shadow-lg:0 24px 60px rgba(0,0,0,0.45);

  /* ---------- bevegelse ---------- */
  --ease:ease;
  --dur-fast:80ms;
  --dur-base:140ms;
  --dur-slow:220ms;

  /* ---------- innholdsbredder ---------- */
  --width-wide:880px;
  --width-narrow:640px;
  --width-prose:680px;
}

*{ box-sizing:border-box; }
/* Fjerner dobbelttrykk-for-å-zoome (IKKE knip-zoom, som beholdes — det er
   et tilgjengelighetskrav, se WCAG 1.4.4). Satt både på * OG eksplisitt på
   html/body — noen WebKit-versjoner ser ut til å bare respektere den på
   rot-elementene for selve dobbelttrykk-avgjørelsen. */
*{ touch-action:manipulation; }
html, body{ touch-action:manipulation; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-tekst);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-display);
  margin:0;
}
a{ color:inherit; text-decoration:none; }

:is(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--gul);
  outline-offset:2px;
}