/* ============================================================
   Forma Health - design tokens (kanonisk kilde)
   Dokumentation og regler: se DESIGN.md i repo-roden.
   Alle sider linker denne fil FØR deres egen <style>.
   Ret aldrig en farve/størrelse lokalt - ret den her.
   ============================================================ */

:root {
  /* ---- Farver: flader ---- */
  --cream:      #F5F0EB;  /* primær baggrund - hele sitet står på denne */
  --cream-2:    #EEE7DE;  /* tonede sektioner, promo-bar */
  --surface:    #FBF7F2;  /* hævede kort og paneler på cream */
  --paper:      #FFFFFF;  /* inputs, portal-kort, forside-base (Hone-neutraler) */
  --charcoal:   #2A2420;  /* varm mørk blok - editorielle sektioner (Hone-stil) */
  --stone:      #EDECE7;  /* lys graa sektionsbaand (Hone "bone") - forside */
  --stone-2:    #DDDCD6;  /* dybere graa: foto-mats, borders paa stone */

  /* ---- Farver: tekst/blæk ---- */
  --ink:        #1C1C1E;  /* primær tekst */
  --ink-2:      #3A3A3D;  /* sekundær tekst, solid */
  --ink-70:     #1C1C1EB3; /* sekundær tekst, 70% */
  --ink-55:     #1C1C1E8C; /* dæmpet tekst, 55% */
  --ink-30:     #1C1C1E4D; /* svag tekst, 30% */
  --ink-12:     #1C1C1E1F; /* svage borders, 12% */
  --rule:       #1C1C1E26; /* hairline-dividere */
  --muted:      #6B6660;  /* dæmpet tekst på lyse solide flader (portal) */
  --muted-2:    #8E8880;  /* svagere variant af --muted */

  /* Tekst på charcoal */
  --on-charcoal:       #F5F0EB;
  --on-charcoal-muted: #F5F0EBB3;

  /* ---- Farver: accent ---- */
  --terra:      #C4714A;  /* KUN accent: CTA, links, kickers, italic-emfase */
  --terra-dark: #A85E3C;  /* hover/active på terra */
  --terra-soft: #E8C9B6;  /* bløde accent-baggrunde, badges */

  /* ---- Farver: dividere (varme, solide) ---- */
  --divider:    #E5DDD3;
  --divider-2:  #DCD2C5;

  /* ---- Farver: status (portal + admin) ---- */
  --sage:     #7A8B6F;  --sage-bg: #E5EADC;  /* optimal */
  --sand:     #B5A079;  --sand-bg: #EFE6D2;  /* i range */
  --clay:     #B8694F;  --clay-bg: #F0D9CD;  /* lav/høj */
  --error:    #C0392B;  /* formfejl */

  /* ---- Typografi ---- */
  --serif: "Archivo", "Iowan Old Style", Georgia, serif;  /* display: Hone-look, expanded/light (2026-07-08) */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(40px, 5.5vw, 72px);  /* hero h1 */
  --fs-h2:      clamp(28px, 3.6vw, 44px);  /* sektionsoverskrifter */
  --fs-h3:      clamp(20px, 2vw, 24px);    /* kort-overskrifter, FAQ */
  --fs-lead:    clamp(17px, 1.6vw, 20px);  /* standfirst under h1 */
  --fs-body:    16px;
  --fs-sm:      13px;                      /* nav, meta, captions */
  --fs-label:   11px;                      /* eyebrow-labels, uppercase */

  --lh-display: 1.05;
  --lh-heading: 1.08;
  --lh-body:    1.55;

  --tracking-display: -0.018em;  /* serif display */
  --tracking-heading: -0.012em;  /* serif h2/h3 */
  --tracking-label:   0.14em;    /* uppercase labels */

  /* ---- Layout ---- */
  --measure:   68ch;                        /* maks. tekstbredde */
  --wrap-max:  1280px;                      /* container */
  --pad-x:     clamp(20px, 5vw, 56px);      /* horisontal side-padding */
  --gap:       clamp(20px, 3vw, 36px);      /* grid-gap */
  --block-pad: clamp(56px, 8vw, 112px);     /* vertikal sektions-padding */

  /* ---- Form ---- */
  --r-sm:   8px;
  --r-md:   12px;   /* kort, inputs */
  --r-lg:   18px;   /* store kort/paneler */
  --r-xl:   24px;   /* app-container */
  --r-pill: 999px;  /* CTA-piller, badges */

  /* ---- Skygger ---- */
  --shadow-1: 0 1px 2px rgba(28, 18, 10, 0.04), 0 0 0 0.5px rgba(28, 18, 10, 0.04);
  --shadow-2: 0 1px 3px rgba(28, 18, 10, 0.06), 0 4px 12px rgba(28, 18, 10, 0.05);
  --shadow-3: 0 2px 6px rgba(28, 18, 10, 0.08), 0 12px 32px rgba(28, 18, 10, 0.08);
  --shadow-card:       0 1px 0 rgba(92, 61, 43, 0.03), 0 14px 32px rgba(92, 61, 43, 0.12);
  --shadow-card-hover: 0 1px 0 rgba(92, 61, 43, 0.04), 0 22px 46px rgba(92, 61, 43, 0.18);

  /* ---- Motion ---- */
  --ease:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 0.2s;   /* hover, små transitions */
  --dur-2: 0.45s;  /* reveals, accordions */

  /* ---- Legacy-aliaser (udfases - brug de kanoniske navne ovenfor) ---- */
  --cream-3: var(--surface);
  --bg:      var(--cream);
  --text:    var(--ink);
}