/* =============================================================
   AASEN BIL 2.0 — base.css
   Fundament: design tokens, reset, UU-hjelpere, typografi, animasjon.
   Lastes av ALLE sider. Holdes liten og stabil.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Merkefarger */
  --red-600: #d81e2c;   /* primær — Aasen-rød, renset opp */
  --red-700: #b3121f;   /* hover/aktiv */
  --red-050: #fdecee;   /* svak rød flate */
  --red-200: #f3c6ca;   /* rød kant/aksent på lys flate (brukes bl.a. av om-oss) */

  --ink-900: #0e1116;   /* nesten svart — topp/bunn, overskrifter */
  --ink-800: #161a20;
  --ink-700: #232a33;
  --ink-500: #5b6675;   /* dempet tekst — 5.9:1 på hvit (AA) */
  --ink-400: #646e7b;   /* sekundær småtekst — 4.8:1 på hvit (AA for normal tekst) */

  --line:    #e5e8ec;   /* hårfine streker */
  --surface: #f6f7f9;   /* lys seksjonsflate */
  --white:   #ffffff;

  /* Status */
  --green-500: #1ca35a; /* "Åpent nå" */

  /* Radius */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Skygger */
  --sh-1: 0 1px 2px rgba(14,17,22,.06), 0 1px 3px rgba(14,17,22,.08);
  --sh-2: 0 6px 18px rgba(14,17,22,.08), 0 2px 6px rgba(14,17,22,.06);
  --sh-3: 0 18px 50px rgba(14,17,22,.16);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --nav-h: 76px;

  /* Type */
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Easing */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;            /* hindrer at off-canvas-menyen lager horisontal scroll */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Tilgjengelighet (WCAG 2.1 AA) ---------- */
/* Synlig fokusindikator (2.4.7) — tydelig, merkekonsistent, aldri fjernet uten erstatning */
:focus-visible {
  outline: 3px solid var(--red-600);
  outline-offset: 2px;
  border-radius: 4px;
}
.header :focus-visible, .topbar :focus-visible { outline-offset: 3px; }
/* På mørk flate: lys fokusring for nok kontrast */
.hero :focus-visible, .section--ink :focus-visible, .footer :focus-visible, .cta-band :focus-visible {
  outline-color: #fff;
}

/* Hopp til hovedinnhold (2.4.1 Bypass Blocks) */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink-900); color: #fff; padding: .7em 1.2em; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Skjult for syn, lesbart for skjermleser */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typografi ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-600);
}
.lead { font-size: 1.15rem; color: var(--ink-500); }

/* ---------- Reveal-animasjon ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}