/*
 * Designtokens — single source of truth for farger, avstand, typografi.
 * Tett, Excel-aktig basis: 13px font, 4px avstandsskala, subtile kanter, ingen tunge skygger.
 * Tema overstyres ved å redefinere variablene under :root i en tenant-spesifikk fil.
 */

:root {
  /* Avstandsskala — tett */
  --avstand-0: 0;
  --avstand-1: 4px;
  --avstand-2: 8px;
  --avstand-3: 12px;
  --avstand-4: 16px;
  --avstand-5: 24px;
  --avstand-6: 32px;
  /* Større steg — brukes kun av admin-side/content-modus (§1.1 i 05-frontend.md),
     ikke i datatunge tabell/matrise-sider. */
  --avstand-7: 48px;
  --avstand-8: 64px;

  /* Typografi */
  --font-familie: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-monospace: ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-liten: 12px;
  --font-base: 13px;
  --font-stor: 15px;
  --font-overskrift: 18px;
  --linje-hoyde: 1.4;
  --linje-hoyde-tett: 1.25;

  /* Farger — lys modus */
  --farge-bakgrunn: #ffffff;
  --farge-overflate: #f7f8fa;
  --farge-overflate-hover: #eef0f4;
  /* Flytende flate (popovere/pill-kontroller over lerret) — hvit i lys modus,
     hevet overflate i dark. Brukes der vi vil at noe «svever» over innholdet. */
  --farge-flytende: #ffffff;
  --farge-kant: #e1e5eb;
  --farge-kant-sterk: #c8ced8;
  --farge-tekst: #1a1f2b;
  --farge-tekst-dempet: #5a6573;
  --farge-tekst-svak: #8a93a3;
  --farge-primary: #1e4cb8;
  --farge-primary-hover: #163d96;
  --farge-primary-tekst: #ffffff;
  --farge-aksent: #d97706;
  --farge-ok: #16a34a;
  --farge-varsel: #d97706;
  --farge-feil: #dc2626;

  /* Form */
  --radius: 4px;
  --radius-stor: 6px;
  --kant: 1px solid var(--farge-kant);
  --skygge-svak: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Subtile rad-skiller i tabeller — knapt synlige kolonneguider.
     Seksjonsskiller (mellom rot-tjenester) bruker --farge-kant-sterk i stedet. */
  --farge-radkant: rgba(0, 0, 0, 0.05);

  /* Rot-familie-farger — for fargestripe per rot-tjeneste i tre-tabellen.
     Matcher mockup-paletten. Brukes som visuell anker når man scroller. */
  --rot-1: #2563eb;
  --rot-2: #0d9488;
  --rot-3: #7c3aed;
  --rot-4: #d97706;
  --rot-5: #c026d3;
  --rot-6: #dc2626;
  --rot-7: #16a34a;
  --rot-8: #475569;
  --rot-9: #78716c;
}

/* Mørk-modus farger — gjenbrukes av både auto (via @media) og eksplisitt valg. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --farge-bakgrunn: #0d1117;
    --farge-overflate: #161b22;
    --farge-overflate-hover: #1f2530;
    --farge-flytende: #161b22;
    --farge-kant: #2d333b;
    --farge-kant-sterk: #444c56;
    --farge-tekst: #e6edf3;
    --farge-tekst-dempet: #9aa6b2;
    --farge-tekst-svak: #6e7681;
    --farge-primary: #4a8bff;
    --farge-primary-hover: #6ba0ff;
    --farge-primary-tekst: #0d1117;
    --skygge-svak: 0 1px 2px rgba(0, 0, 0, 0.4);
    --farge-radkant: rgba(255, 255, 255, 0.04);
  }
}

/* Eksplisitt mørk — overstyr selv om systemet er i lys-modus. */
:root[data-tema="mork"] {
  --farge-bakgrunn: #0d1117;
  --farge-overflate: #161b22;
  --farge-overflate-hover: #1f2530;
  --farge-flytende: #161b22;
  --farge-kant: #2d333b;
  --farge-kant-sterk: #444c56;
  --farge-tekst: #e6edf3;
  --farge-tekst-dempet: #9aa6b2;
  --farge-tekst-svak: #6e7681;
  --farge-primary: #4a8bff;
  --farge-primary-hover: #6ba0ff;
  --farge-primary-tekst: #0d1117;
  --skygge-svak: 0 1px 2px rgba(0, 0, 0, 0.4);
  --farge-radkant: rgba(255, 255, 255, 0.04);
}

/* Eksplisitt lys — bruker :root-defaults; ingen overstyring trengs siden
   @media-blokken har :not([data-tema="lys"]). */