/* Verarcas designsystem: tokens og grundregler.
   Indlæses først på alle sider (også grant-thornton.html). Alt andet bygger på
   disse værdier. Reglerne for brugen står i DESIGN.md. */

:root {
  /* Farver */
  --ink: #09090B;      /* tekst, mørke flader */
  --muted: #5F5A5D;    /* brødtekst og sekundær tekst */
  --or: #FF6C47;       /* handling: knapper, aktive tilstande, små accenter */
  --or-hover: #F2552D;
  --or10: #FFF0ED;     /* lyse orange flader */
  --light: #F6F4F5;    /* grå kort */
  --line: #E6E2E4;     /* linjer og kanter */
  --teal: #266663;     /* accent, "ok"-tilstande */
  --teal10: #E8F1EF;
  --slate: #4B7397;    /* accent, "låst"-tilstande */
  --mauve: #A75481;    /* kun i gløder og gradienter */

  /* Skrift */
  --disp: "Funnel Display", Lexend, system-ui, sans-serif;
  --body: Lexend, system-ui, sans-serif;

  /* Typeskala (desktop / mobil under 760 px). H1, H2 og store tal er flydende (clamp).
     Nye komponenter bruger kun disse tokens - ingen font-size i px i komponent-CSS. */
  --fs-h1: clamp(40px, 5.2vw, 72px);   /* 72 / 40 */
  --fs-h2: clamp(32px, 3.4vw, 44px);   /* 44 / 32 */
  --fs-tal: clamp(40px, 5vw, 56px);    /* 56 / 40 - store tal og priser, Funnel Display 400 */
  --fs-h3: 22px;       /* korttitler (20 på mobil) */
  --fs-lead: 20px;     /* indledning (18 på mobil) */
  --fs-body: 17px;     /* brødtekst (16 på mobil) */
  --fs-ui: 15px;       /* knapper, menu, links */
  --fs-small: 14px;    /* lille tekst og label */
  --fs-micro: 12px;    /* tags - aldrig mindre end 12 px */

  /* Radius */
  --r-lg: 24px;        /* store kort */
  --r-md: 16px;        /* små kort */
  --r-sm: 10px;        /* felter */
  --r-pille: 999px;    /* knapper, piller, tags */
  --shadow: 0 24px 60px -28px rgba(9, 9, 11, .28);

  /* Afstande og bredde */
  --wrap: 1136px;      /* indholdsbredde */
  --gutter: 32px;      /* luft i siderne */
  --sp: 120px;         /* lodret rytme: kun padding-top på hver sektion */
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --sp: 72px; --fs-h3: 20px; --fs-lead: 18px; --fs-body: 16px; }
}

/* Grundregler */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body {
  font-family: var(--body); font-weight: 300; font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Typografi: én H1-størrelse, én H2-størrelse.
   Funnel Display 500 i --ink, begge dele af en todelt overskrift. */
h1, h2 { font-family: var(--disp); font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h1 em, h2 em { font-style: normal; font-weight: inherit; color: inherit; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; }
p { color: var(--muted); }
p + p { margin-top: 14px; }
.lead { font-size: var(--fs-lead); }
.sm { font-size: var(--fs-small); line-height: 1.5; }

/* Roligt fade-in, én gang, når elementet kommer i syne */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* Sektion: lodret rytme kun som padding-top */
.sek { padding-top: var(--sp); }
.sek .head { max-width: 640px; margin-bottom: 56px; }
.sek .head p { margin-top: 16px; }
.sek .centreret { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }