/* avis-ui/tokens.css — det delte "avis"-designsprog. TO LAG (jf. docs/DESIGNSYSTEM.md §9):
   TIER 1 = palet (rå værdier — ét sted at reskin/skifte tema). TIER 2 = semantiske roller
   som komponenter BØR bruge (ikke rå palet). Dark mode + tenant-tema overstyrer paletten;
   rollerne følger automatisk med. --accent er den primære themeable pr. vertikal. */
:root {
  color-scheme: light dark;   /* native kontroller/scrollbars/systemfarver følger tilstand */
  /* ===== TIER 1 · palet (rå værdier) ===== */
  --paper:#EFE9DC; --panel:#E7DFCD; --panel2:#F4EEE0;
  --ink:#23211C; --body:#4E4940; --label:#5E564A; --label-soft:#6B6356;
  --accent:#B14228; --accent-ink:#9C3820; --link:#2A5752; --up:#5A7A4E; --down:#8E2A1C;
  --rank:#C2B79C; --hair:#D7CDB8; --hair2:#CDC1A6; --hair3:#E0D7C2; --track:#D6CAB0;

  /* ===== TIER 2 · semantiske roller (brug DISSE i komponenter) ===== */
  --bg:var(--paper);            /* side-baggrund */
  --surface:var(--panel2);      /* kort/panel-flade */
  --surface-2:var(--panel);     /* sekundær flade (tabelhoved o.l.) */
  --text:var(--ink);            /* overskrifter / stærk tekst */
  --text-body:var(--body);      /* brødtekst */
  --text-muted:var(--label);    /* labels / dæmpet */
  --text-faint:var(--label-soft);
  --border:var(--ink);          /* stærk 1.5px-ramme */
  --border-soft:var(--hair2);   /* lettere ramme */
  --hairline:var(--hair);       /* skillelinjer */
  --accent-contrast:#fff;       /* tekst PÅ accent — SKAL holde WCAG AA pr. tenant */
  --accent-hover:var(--accent-ink);  /* hover/tryk på accent-flader */
  --accent-subtle:color-mix(in srgb, var(--accent) 14%, var(--paper));  /* dæmpet accent-flade (valgt række/badge-bg) — flipper med tilstand */
  --focus:var(--link);          /* fokus-ring (:focus-visible) */
  --elevate:var(--track);       /* offset-skyggens farve */
  --pos:var(--up); --neg:var(--down);
  --offset:4px 4px 0 var(--elevate);
  --offset-lg:6px 6px 0 var(--elevate);   /* løftet elevation (kort-hover, popover) — ét sted, ikke one-off */
  --scrim:rgba(20,18,14,.34);   /* overlay-slør bag mega-panel/popovers (altid mørkt — også i dark) */

  /* ===== skala-tokens (Claude Designer QC §1): fast rytme frem for ad hoc-værdier =====
     Afstand ~8px-grid; typografi ~1.25-ratio; radius fast; mono-labels to trin. */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --fs-h1:46px; --fs-h2:34px; --fs-h3:27px; --fs-h4:22px; --fs-h5:18px; --fs-h6:16px;
  --radius:0; --radius-pill:2px;
  /* mono-label-STØRRELSER (to trin, ikke 10/10.5/11-jitter). NB: --label er en FARVE (tier1),
     så størrelserne får egne navne. --label-sm = tætte tabeller/kort · --label-lg = kickers. */
  --label-sm:10.5px; --label-lg:11px;
  /* kvalitets-glyph ●◐○ (systemets stærkeste aktiv — mening uden farve, CVD-sikker) */
  --g-ok:var(--up); --g-est:var(--accent); --g-na:var(--label-soft);

  /* ===== DATAVIZ-paletter — UAFHÆNGIGE af brand-accent (accent=chrome, data=semantik).
     Kategorisk = farveblind-sikker (Okabe-Ito-udvalg, ingen rød/grøn-fælde, mid-toner der
     læses på både lys OG mørk). Sekventiel = varm én-tone (luminans-ordnet). Divergerende =
     RdBu (rød↔blå). REGEL: par altid med en 2. kanal (label/mønster), aldrig kun farve. ===== */
  /* LIGHT-tilstand: mørkere toner så tynde linjer holder ≥3:1 mod det lyse papir (WCAG 1.4.11).
     Redefineres lysere i dark-blokken nedenfor. Rækkefølge = mest adskilte hues først. */
  /* Claude Designer §2: hue OG luminans spredt jævnt (~50–60° fra hinanden), mættning dæmpet
     ~8–12% så de "sætter sig" på papiret. Løser: --cat-1/--cat-6 var begge blå; --cat-5/--cat-7
     begge mudrede jordfarver. Ny orden holder Okabe-Ito-adskillelse + ≥3:1 mod --paper. */
  --cat-1:#1D5B9E; --cat-2:#C0531C; --cat-3:#2C7A56; --cat-4:#9C4A79;
  --cat-5:#9E7817; --cat-6:#4E5C9C; --cat-7:#7A5638;
  --seq-1:#F1E4D6; --seq-2:#DEB396; --seq-3:#C97C5B; --seq-4:#B14228; --seq-5:#7A2E1B;
  --div-1:#B2182B; --div-2:#EF8A62; --div-3:#EDE7DA; --div-4:#67A9CF; --div-5:#2166AC;

  /* ===== ORG-palet (hovedorganisationer) — genkendelige farver, ALTID parret m. fast glyf
     (●◆▲■○) som 2. kanal, så signalet holder for farveblinde/print. Duellen/Toplisten m.fl.
     Lyse værdier her; mørke i dark-blokkene. ===== */
  --org-fh:#B4302A; --org-ac:#1F5FA6; --org-gul:#9E7A10; --org-led:#2E7D57; --org-uaf:#6E5B45;

  /* ===== spacing-skala + pille-radius (værktøjs-laget) ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --radius-pill:2px;

  /* ===== typografi — self-hostede fonts pr. site; her robuste fallback-stakke ===== */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ===== Dark mode — AUTO via prefers-color-scheme (ingen JS → CSP-sikker). Kun TIER 1-paletten
   redefineres; de semantiske roller (var(--paper) osv.) følger automatisk med. Flader løftes
   via lysere --panel2 (skygger læses dårligt på mørk). Accent + accent-contrast sættes pr.
   tenant i theme.css (løftet variant) — de neutrale toner her deles af alle sites. ===== */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1A1712; --panel:#221E17; --panel2:#26221A;
    --ink:#ECE6D8; --body:#C6BEAF; --label:#A69D8C; --label-soft:#8C8474;
    --link:#6FB2A9; --up:#8FC08A; --down:#E0876F;
    --rank:#6E6656; --hair:#39342A; --hair2:#423C30; --hair3:#2E2A22; --track:#0E0C09;
    /* accent + hover + tekst-på-accent: defensive defaults til accent-løse vertikaler;
       tenants med [theme].accent får deres egen løftede variant fra theme.css (loades efter). */
    --accent:#CC8271; --accent-ink:#DDA08F; --accent-contrast:#1A1712;
    /* dataviz: lysere toner (≥3:1 mod --panel2), samme hue-orden som light (Designer §2) */
    --cat-1:#6BB0E4; --cat-2:#F0895A; --cat-3:#4FC49E; --cat-4:#DE97C2;
    --cat-5:#E4BE5C; --cat-6:#9AA6E8; --cat-7:#C6A57E;
    --org-fh:#E48C7E; --org-ac:#6FB0E0; --org-gul:#E8C24E; --org-led:#64C79B; --org-uaf:#B8A488;
  }
}

/* ===== Manuel tema-override — [data-theme] på <html> (sat af app-core.js' tema-toggle:
   Auto → Lys → Mørk, husket i localStorage). Auto (via @media ovenfor) forbliver default.
   [data-theme] har HØJERE specificitet end :root i @media, så et manuelt valg vinder over
   systemets tilstand i BEGGE retninger. Kun TIER 1-paletten redefineres; rollerne følger.
   Tenant-accent sættes tilsvarende pr. [data-theme] i theme.css (loades efter). ===== */
:root[data-theme="light"]{
  --paper:#EFE9DC; --panel:#E7DFCD; --panel2:#F4EEE0; --track:#D6CAB0;
  --ink:#23211C; --body:#4E4940; --label:#5E564A; --label-soft:#6B6356;
  --link:#2A5752; --up:#5A7A4E; --down:#8E2A1C; --rank:#C2B79C;
  --hair:#D7CDB8; --hair2:#CDC1A6; --hair3:#E0D7C2;
  --accent:#B14228; --accent-ink:#9C3820; --accent-contrast:#fff;
  --cat-1:#1D5B9E; --cat-2:#C0531C; --cat-3:#2C7A56; --cat-4:#9C4A79;
  --cat-5:#9E7817; --cat-6:#4E5C9C; --cat-7:#7A5638;
  --org-fh:#B4302A; --org-ac:#1F5FA6; --org-gul:#9E7A10; --org-led:#2E7D57; --org-uaf:#6E5B45;
}
:root[data-theme="dark"]{
  --paper:#1A1712; --panel:#221E17; --panel2:#26221A;
  --ink:#ECE6D8; --body:#C6BEAF; --label:#A69D8C; --label-soft:#8C8474;
  --link:#6FB2A9; --up:#8FC08A; --down:#E0876F;
  --rank:#6E6656; --hair:#39342A; --hair2:#423C30; --hair3:#2E2A22; --track:#0E0C09;
  --accent:#CC8271; --accent-ink:#DDA08F; --accent-contrast:#1A1712;
  --cat-1:#6BB0E4; --cat-2:#F0895A; --cat-3:#4FC49E; --cat-4:#DE97C2;
  --cat-5:#E4BE5C; --cat-6:#9AA6E8; --cat-7:#C6A57E;
  --org-fh:#E48C7E; --org-ac:#6FB0E0; --org-gul:#E8C24E; --org-led:#64C79B; --org-uaf:#B8A488;
}