/* Vaskelaget — designtokens fra kundens leveranse (Claude Design-eksport).
   Slått sammen verbatim fra tokens/{colors,typography,spacing,effects,base}.css.
   Fontene lastes med <link> i hver side i stedet for @import (raskere). */

:root {
  /* ---- farger: base ---- */
  --cream-0: #FFFFFF;
  --cream-50: #FAF3E3;
  --cream-100: #F3E9D2;
  --ink-900: #1F1D1A;
  --ink-600: #4B463D;
  --ink-500: #6B6455;
  --ink-300: #B8B2A4;
  --yellow-300: #F2C455;
  --yellow-400: #E9B93E;
  --salmon-300: #F3B7A3;
  --teal-300: #8FC4C1;
  --lavender-300: #C9BEE7;
  --sage-300: #B5CDA3;
  --sky-300: #A6C4E2;
  --green-400: #6FA57C;
  --red-400: #D96B4F;

  /* ---- farger: semantiske ---- */
  --surface-page: var(--cream-50);
  --surface-card: var(--cream-0);
  --surface-inverse: var(--ink-900);
  --text-body: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-inverse: var(--cream-50);
  --ink: var(--ink-900);
  --accent: var(--yellow-300);
  --accent-strong: var(--yellow-400);
  --accent-2: var(--salmon-300);
  --accent-3: var(--teal-300);
  --accent-4: var(--lavender-300);
  --accent-5: var(--sage-300);
  --accent-6: var(--sky-300);
  --success: var(--green-400);
  --danger: var(--red-400);

  /* ---- farger som artboardene hardkoder (ikke tokenisert i leveransen) ---- */
  --link-hover: #8A6A10;      /* lenke-hover, mørk gull */
  --on-salmon: #3D332C;       /* brødtekst på laks */
  --on-teal: #16403D;         /* brødtekst på teal */
  --on-yellow: #5C4A12;       /* brødtekst på gul */
  --on-yellow-2: #4B3C14;
  --on-yellow-3: #3D3310;
  --cream-tint: #F3EADA;
  --footer-copy: #7D7869;     /* copyright i footer */

  /* ---- typografi ---- */
  --font-display: 'Domine', Georgia, serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --text-h1: 46px;
  --text-h2: 34px;
  --text-h3: 26px;
  --text-h4: 22px;
  --text-lead: 15px;
  --text-base: 14px;
  --text-small: 12.5px;
  --text-tiny: 11px;
  --leading-tight: 1.18;
  --leading-heading: 1.25;
  --leading-body: 1.7;

  /* ---- rom og radius ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 90px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --container: 1160px;
  --container-pad: 40px;

  /* ---- rammer og skygger: flate offset, aldri blur ---- */
  --shadow-ink: var(--ink-900);
  --border-strong: 1.5px solid var(--ink-900);
  --shadow-offset: 3px 3px 0 var(--shadow-ink);
  --shadow-offset-lg: 4px 4px 0 var(--shadow-ink);
  --shadow-offset-sm: 2px 2px 0 var(--shadow-ink);
  --shadow-offset-pressed: 1px 1px 0 var(--shadow-ink);
}

/* ---- base ---- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); font-family: var(--font-body); color: var(--text-body); }
a { color: var(--text-body); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* [hidden] må slå klasser som setter display (.banner, .inline-note, .stepper …) */
[hidden] { display: none !important; }