/* ============================================================
   integr8 — tokens.css
   ÉN kilde til sandhed for hele designet: farver, typografi,
   afstande og bevægelse. Ret en værdi her, og hele sitet
   følger med. Det er den vigtigste fil at kende.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     FARVER
     Varmt off-white "papir", nær-sort blæk og ÉN stærk accent
     (cobalt-blå). Farve får opmærksomhed, fordi den er sjælden.
     ---------------------------------------------------------- */
  --color-bg: #faf9f6;            /* sidebaggrund — varmt papir */
  --color-bg-alt: #f2f0ea;        /* alternerende sektioner */
  --color-surface: #ffffff;       /* cards og hævede flader */
  --color-ink: #0e1726;           /* primær tekst (~16:1 kontrast) */
  --color-ink-soft: #3c4656;      /* brødtekst, sekundær tekst */
  --color-muted: #5f6979;         /* labels/captions på lyse flader; AA-sikker (≥4.5:1), ikke til brødtekst */
  --color-line: #e3e0d8;          /* hairline-borders og delelinjer */

  --color-accent: #1f4dff;        /* cobalt — CTA'er, links, 8-mærket */
  --color-accent-press: #1a3fcc;  /* hover/active på accent */
  --color-accent-tint: #e9edff;   /* meget lys accent-vask */
  --color-accent-ink: #ffffff;    /* tekst oven på accent */

  --color-success: #1e9e6a;       /* kun formular-succes */
  --color-error: #c2402e;         /* kun formular-fejl */
  --color-focus: var(--color-accent);

  /* Inverterede neutraler — KUN de mørke sektioner (kontakt + footer).
     Holder ÉN-kilde-til-sandhed; ret en mørk farve her, ikke i styles.css. */
  --color-ink-deep: #0b121e;                    /* dybeste flade — footer-bund */
  --color-ink-invert: #e8eaf0;                  /* lys tekst/links på mørk */
  --color-ink-soft-invert: #b9c0cd;             /* sekundær lys tekst på mørk */
  --color-muted-invert: #8b95a6;                /* labels/captions på mørk */
  --color-line-invert: rgb(255 255 255 / 0.08); /* hairline på mørk */

  /* ----------------------------------------------------------
     TYPOGRAFI
     Fraunces (karakterfuld soft-serif) til overskrifter,
     Hanken Grotesk til brødtekst, JetBrains Mono som lille
     teknisk accent (sektionsnumre, labels, marquee).
     ---------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Flydende typeskala — vokser blødt fra mobil (~360px) til
     desktop (~1440px) uden breakpoints */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);   /* småtekst/captions */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* brødtekst */
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);      /* lead/stor brødtekst */
  --step-2: clamp(1.5rem, 1.28rem + 1vw, 2.1rem);        /* h3 */
  --step-3: clamp(1.9rem, 1.45rem + 2.2vw, 3.1rem);      /* h2 */
  --step-4: clamp(2.3rem, 1.55rem + 3.4vw, 3.8rem);      /* h1/hero — capped så heroens to linjer holder */

  /* ----------------------------------------------------------
     AFSTANDE & LAYOUT
     ---------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4.5rem, 2.5rem + 8vw, 8.5rem);  /* luft mellem sektioner */

  --container: 1180px;            /* maks. indholdsbredde */
  --container-narrow: 760px;      /* til prosa/smalle blokke */
  --measure: 62ch;                /* maks. linjelængde for læsbarhed */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius: 14px;                 /* ÉN radius, brugt konsekvent */
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);

  --nav-h: 4.25rem;               /* højde på sticky nav */

  /* ----------------------------------------------------------
     BEVÆGELSE
     Små, konsistente varigheder. Intet bounce, intet cirkus.
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.9s;
}