/* Lag oven på foundations/tokens.css — kun tilføjelser, tokens.css er urørt.
 *
 * Grøn er paletten, ikke kun knappen. Rampen er løftet et trin i lyshed, så
 * CTA'en er lysere end før, og overskrifterne står i den mørkeste grøn i
 * stedet for sort. Guldet fra logoet er sekundær accent — streger, datoer,
 * kvittering — aldrig flade og aldrig knap.
 *
 * Kontrast, målt:
 *   green-500 fyld + hvid tekst        4,7:1
 *   green-700 tekst på surface-light   5,9:1
 *   green-900 overskrift på lys flade  11,6:1
 *   brødtekst #2C332E på lys flade     11,9:1
 *   dæmpet #5C665E på lys/kapitelflade 5,4 / 5,0:1
 *   gold-700 accent på lys flade       5,5:1
 */
:root{
  --green-900:#14392A;
  --green-800:#17472F;
  --green-700:#1C6B45;
  --green-600:#22764C;
  --green-500:#2A8350;
  --green-400:#3E9A63;
  --green-300:#7CC49B;
  --green-100:#E3EFE6;

  /* Basen er varm, ikke grøn. Grøn skal være accent og handling — bliver den
   * også luften, forsvinder den. Kapitelfladen er sand, altså modsat grøn på
   * farvecirklen, og de dybe sektioner er grønne. Fire hues i spil:
   * varm neutral, grøn, rust, guld. */
  --surface-light:#F6F3EC;   /* base — varm off-white */
  --surface-sand:#F5E7D8;    /* kapitelskift — sand */
  --text-on-light:#2C332E;
  --heading-color:var(--green-900);
  --text-muted:#5C665E;
  --border-soft:#E6DFD2;
  --border-strong:#CFC5B4;

  --cta-on-light:var(--green-500);
  --cta-fg-on-light:var(--ink-0);
  --cta-hover-on-light:var(--green-700);
  --focus-on-light:var(--green-700);

  /* Tredje farve: rust. Den er løbets farve — tidspunkter, distancer, tal.
   * Grøn = handling, guld = logoarv, rust = energi. Rust bliver aldrig en knap.
   *   sun-700 tekst på lys flade   5,3:1
   *   sun-500 som fyld/graf ik     3,4:1 mod lys flade (kun ikke-tekst)
   *   sun-300 tekst på dyb grøn    5,1:1 */
  --sun-700:#B23F1C;--sun-500:#E4572E;--sun-300:#F2865C;

  /* Dyb grøn flade. Den giver siden kapitler uden at gå til sort — tidslinje,
   * citater og footer står her. */
  --surface-deep:#14392A;
  --surface-deep-card:#1C4A36;

  --radius-pill:999px;
  --disabled-bg-light:#E0D9CB;--disabled-fg-light:#5C665E;
}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3{color:var(--heading-color)}
body{margin:0;font:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased}
a:not(.btn){color:var(--cta-hover-on-light);text-decoration-thickness:1px;text-underline-offset:3px}
a:not(.btn):hover{color:var(--green-900)}
.on-sand{--cta:var(--cta-on-light);--cta-text:var(--cta-hover-on-light);--cta-fg:var(--cta-fg-on-light);--cta-hover:var(--cta-hover-on-light);--ring:var(--focus-on-light);--fg:var(--text-on-light);--fg-muted:var(--text-muted);--disabled-bg:#DDD3C2;--disabled-fg:#5C665E;--field-bg:var(--ink-0);--field-border:#DCD2C1;--field-fg:var(--text-on-light);--field-placeholder:var(--text-muted);background:var(--surface-sand);color:var(--text-on-light)}
.on-light{--cta:var(--cta-on-light);--cta-text:var(--cta-hover-on-light);--cta-fg:var(--cta-fg-on-light);--cta-hover:var(--cta-hover-on-light);--ring:var(--focus-on-light);--fg:var(--text-on-light);--fg-muted:var(--text-muted);--disabled-bg:var(--disabled-bg-light);--disabled-fg:var(--disabled-fg-light);--field-bg:var(--ink-0);--field-border:var(--border-strong);--field-fg:var(--text-on-light);--field-placeholder:var(--text-muted);background:var(--surface-light);color:var(--text-on-light)}
:where(.on-light,.on-sand,.on-deep,.on-brand) :where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--ring);outline-offset:var(--focus-offset)}
.on-deep{--cta:var(--green-300);--cta-text:var(--green-300);--cta-fg:var(--green-900);--cta-hover:#9BD4B2;--ring:var(--green-300);--fg:#EAF3EC;--fg-muted:#A9C2B2;--heading-color:#EAF3EC;--border-soft:#2E5544;--border-strong:#3C6A54;--field-bg:#0F2C21;--field-border:#2E5544;--field-fg:#EAF3EC;--field-placeholder:#A9C2B2;background:var(--surface-deep);color:#EAF3EC}
.on-brand{--cta:var(--ink-0);--cta-text:var(--ink-0);--cta-fg:var(--sun-700);--cta-hover:#FBEFE9;--ring:var(--ink-0);--fg:var(--ink-0);--fg-muted:#F3D9CD;--heading-color:var(--ink-0);background:var(--sun-700);color:var(--ink-0)}
.on-deep a:not(.btn){color:var(--sun-300)}
.on-deep a:not(.btn):hover{color:var(--green-300)}
.on-brand a:not(.btn){color:var(--ink-0)}