/* Bypuls – designtokens (brandguide v1.1, 16. okt 2026)
   Masterbrand: Lyng #7A2C91. Neutrale: kold lyng-tonet grå.
   Fonte: Familjen Grotesk (display), Atkinson Hyperlegible Next (tekst).
   Alle farvepar er tjekket til WCAG 2.2 AA i begge temaer. */

/* Fonte, self-hostet (OFL, variable, fra Fontsource via scripts/vendor.mjs). Ingen kald til Google. */
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/familjen-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: light;

  /* Brand */
  --lyng:        #7A2C91;   /* masterbrand */
  --lyng-deep:   #5E1F73;   /* lyng-strong i brandguiden */
  --lyng-soft:   #F4E8F7;   /* flader, chips, hover */
  --lyng-tint:   #F9F3FB;   /* meget svag flade */

  /* Neutrale */
  --canvas:      #FFFFFF;   /* sitet kører på hvid; farveflader bryder siden */
  --canvas-2:    #F7F6F9;   /* brandguidens canvas – bruges til app-skærm og dæmpede flader */
  --surface:     #FFFFFF;
  --surface-muted: #ECE9F0;
  --ink:         #17141C;
  --ink-2:       #3E3846;   /* sekundær tekst */
  --ink-3:       #655E70;   /* hjælpetekst, ≥5:1 på alle flader */
  --line:        #E3E0E8;
  --line-strong: #8A8394;

  /* Semantik */
  --focus:       #7A2C91;
  --ok:          #1F7A4D;
  --error:       #B3261E;

  /* Typografi */
  --font-display: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala (fluid). Body 17 på desktop, 16 på mobil. */
  --fs-body:   clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-small:  0.9375rem;
  --fs-tiny:   0.8125rem;
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:     clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --fs-h1:     clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  --fs-quote:  clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-text:   1.55;

  --track-display: -0.025em;

  /* Rum */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --section: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Former */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Bevægelse */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  --shadow-phone: 0 30px 60px -20px rgba(23, 20, 28, 0.25), 0 0 0 1px rgba(23, 20, 28, 0.06);
}

/* Mørk tilstand er opt-in på sitet (sæt <html data-theme="dark">). Tokens er klar til appen. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas-2:    #1C1922;
  --surface-muted: #2C2733;
  --lyng:        #D9A5EA;
  --lyng-deep:   #EBCBF4;
  --lyng-soft:   #3C2145;
  --lyng-tint:   #241A2A;

  --canvas:      #121016;
  --surface:     #1C1922;
  --ink:         #F3F1F6;
  --ink-2:       #BDB6C7;
  --ink-3:       #A39BAE;
  --line:        #3A3542;
  --line-strong: #7A7385;

  --focus:       #D9A5EA;
  --ok:          #6FCF97;
  --error:       #F28B82;

  --shadow-phone: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}