/* ============================================================
   TOKENS — Oliver Høy El & Teknik · design-DNA: "Sort på hvidt" (monokrom)
   ============================================================
   KONTRAKTEN (UNIKHED.md): variabelNAVNENE er ens på alle Madsen
   Studio-sider — VÆRDIERNE er det aldrig. Alt udseende refererer
   hertil; ingen hex-koder eller font-navne andre steder i CSS'en.
   Retema 14/7-2026 efter behovsinterview: Oliver ønsker SORT/HVID
   (ref. lux-el.dk) — monokrom, teknisk, høj kontrast. Accent = sort.
   ============================================================ */

:root {
  /* ---------- Flader (ren, lys verden) ---------- */
  --bg:        #F7F7F5;   /* varm-neutral near-white primær flade */
  --bg-2:      #FFFFFF;   /* rene hvide løftede kort/fotorammer */
  --bg-3:      #EBEBE8;   /* lys grå emphasis-bånd */

  /* ---------- Tekst (monokrom verden) ---------- */
  --ink:       #161616;   /* near-black — generel/stærk tekst (WCAG AAA på --bg) */
  --head:      #0C0C0C;   /* overskrifter = dyb sort */
  --ink-2:     #3E3E3C;   /* brødtekst = mørk grå (WCAG AAA) */
  --ink-3:     #626260;   /* tertiær/svag grå — 5,1:1 på --bg-3 (footer), var #6B6B67 = 4,48 (målt 22/9) */
  --paper:     #F2F2F0;   /* off-white tekst PÅ mørkt bånd */
  --paper-2:   #A6A6A2;   /* dæmpet tekst på mørkt bånd */
  --surface-dark: #0F0F0F; /* de mørke sektioners flade = rig sort */

  /* ---------- Identitet (sort er accenten — "Sort på hvidt", Olivers ønske; 24/8) ---------- */
  --accent:        #111111;            /* sort accent */
  --accent-deep:   #000000;            /* tekst-accent/hover */
  --accent-soft:   rgba(17,17,17,0.06);
  --accent-line:   rgba(17,17,17,0.38);
  --cta:           #0F0F0F;            /* primær knap = sort */
  --cta-deep:      #000000;

  /* ---------- Gnisten (eneste farve på sitet — KUN strøm-detaljer; afklares m. Oliver før go-live) ---------- */
  --spark:      #3D7BFF;              /* elektrisk blå — lys/pulser på mørke flader */
  --spark-deep: #1B55D6;              /* gnist på lyse flader (grafik/chips) */
  --spark-glow: rgba(61,123,255,0.55);

  /* ---------- Streger ---------- */
  --hairline:   rgba(15, 15, 15, 0.12);
  --hairline-2: rgba(15, 15, 15, 0.24);
  --hairline-d: rgba(242, 242, 240, 0.16); /* streg på mørkt bånd */

  /* ---------- Typografi (Familjen Grotesk + Hanken Grotesk + Space Mono — ALDRIG Inter/Roboto/system) ---------- */
  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, monospace; /* eyebrows/indeks = mono UPPERCASE+tracking = teknisk */

  /* ---------- Typeskala (rolig, redaktionel — display må blive STOR) ---------- */
  --t-display-xl: clamp(45px, 7vw, 110px);
  --t-display-l:  clamp(36px, 5.6vw, 84px);
  --t-display-m:  clamp(27px, 3.2vw, 46px);
  --t-display-s:  clamp(22px, 2.2vw, 31px);
  --t-lead:       clamp(18px, 1.45vw, 22px);
  --t-body:       17px;
  --t-small:      14.5px;
  --t-eyebrow:    12.5px;

  /* ---------- Rytme ---------- */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;
  --s-4: 16px; --s-5: 24px;  --s-6: 32px;
  --s-7: 48px; --s-8: 64px;  --s-9: 96px;
  --s-10: 144px;

  --gutter: clamp(22px, 5vw, 76px);
  --rhythm: clamp(56px, 7vw, 112px);
  --max:    1320px;
  --measure: 62ch;

  /* ---------- Bevægelses-personlighed (rolig side) ---------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0.02, 0.18, 1);
  --dur:       850ms;
  --dur-fast:  300ms;

  /* reveal-motor (overskrives pr. sektion ved behov) */
  --reveal-y:    26px;
  --reveal-dur:  900ms;
  --reveal-step: 90ms;
  --reveal-blur: 8px;

  /* ---------- Form (teknisk = ret lav radius) ---------- */
  --r-1:    3px;
  --r-card: 5px;
  --r-pill: 999px;

  /* ---------- Skygger (neutral sort, bløde og lange) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.07);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.06), 0 24px 60px rgba(0,0,0,0.12);
  --shadow-photo: 0 30px 70px -28px rgba(0,0,0,0.36);
}
