/* =============================================================
   Inxo — designtokens
   -------------------------------------------------------------
   HENTET ORDRETT FRA GRENSESNITTSKISSEN (mockup v0.8).
   Ingen verdi er endret ved uttrekket.

   Lyst er standard, i tråd med CIRONs digitale identitet v1.0.
   Nøytralene er identitetens egne, alle målt til minst 7:1.
   ============================================================= */


/* ─────────────────────────────────────────────
   CIRON design tokens (subset of colors_and_type.css)
   ───────────────────────────────────────────── */
/* ── temaer (v0.23): LOSJI ──────────────────────────────────────────
   Tre farger, tre roller. Valgt av styret 8. september 2026.

     Marineblå   → vaktrommet i LYST tema. Ro og autoritet.
     Perle       → arbeidsflatene. #F7F8FA, 94 % lysstyrke: nede nok til at
                   øyet merker det over en arbeidsdag, oppe nok til at ingen
                   tenker «grå». Aldri mot gult — varmhvit ved siden av
                   marineblått leser som skittenhvit.
     Skogsgrønn  → hverdagsmodus. Restitusjon og balanse.

   I MØRKT tema er skallet koksgrå, ikke marineblått: ingen marineblå tone
   skiller seg fra koksgrå flater (målt til 1,03:1 — usynlig). Marineblått er
   lystemaets kjennetegn; mørkt tema har én koksgrå gjennomgående.

   Én flate per rute. Verktøylinjen deler bakgrunn med innholdet under og
   skilles med kanten alene. Kant som bærer struktur: minst 3:1. Tekst: 7:1. */
:root{
  --bg-app:#F7F8FA; --bg-canvas:#F7F8FA;
  --surface-1:#F7F8FA; --surface-2:#EEF1F5; --surface-3:#E7EBF1;
  --fg-1:#171C27; --fg-2:#303845; --fg-3:#444D5E;
  --rail:#151C33; --rail-fg:#E8EBF3; --rail-mute:#A7AFC7; --rail-on:rgba(255,255,255,.13);
  --ciron-teal:#26365F; --teal-fg:#26365F; --teal-soft:#EEF1F5; --on-teal:#FFFFFF;
  --aksent-2:#6B4508; --on-aksent-2:#FFFFFF;
  --tilstand-hverdag:#1E5142; --tilstand-hverdag-soft:#E7F1EC;
  --tilstand-skjerpet:#6B4508; --tilstand-skjerpet-soft:#F8F2E5;
  --tilstand-hendelse:#93221A; --tilstand-hendelse-soft:#FBEBE8;
  --tilstand-gjen:#3C4A63; --tilstand-gjen-soft:#EDF0F5;
  --on-tilstand:#FFFFFF; --on-rail-hvit:#FFFFFF;
  --border-strong:#7A8396; --border:#868FA2; --border-hairline:#B3BBCB;
  --danger:#93221A; --on-danger:#FFFFFF; --warning-fg:#6B4508; --ok-fg:#1E5142;
  --merke-ring:#E8EBF3; --merke-farge:#A7AFC7; --merke-sveip:#C7CEE4;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI","Inter",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI","Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --radius-sm:6px; --radius-md:10px; --radius-pill:999px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg-app:#1B1C1F; --bg-canvas:#1B1C1F;
  --surface-1:#1B1C1F; --surface-2:#232427; --surface-3:#2A2C30;
  --fg-1:#EDEEF0; --fg-2:#C3C5CA; --fg-3:#B9BCC2;
  --rail:#151619; --rail-fg:#EDEEF0; --rail-mute:#A9ACB3; --rail-on:rgba(255,255,255,.13);
  --ciron-teal:#93B4E8; --teal-fg:#93B4E8; --teal-soft:#232427; --on-teal:#0B0E13;
  --aksent-2:#EFC06B; --on-aksent-2:#0B0E13;
  --tilstand-hverdag:#7FCBAE; --tilstand-hverdag-soft:#16241F;
  --tilstand-skjerpet:#EFC06B; --tilstand-skjerpet-soft:#2B2412;
  --tilstand-hendelse:#F5978B; --tilstand-hendelse-soft:#2E1A17;
  --tilstand-gjen:#A9BACD; --tilstand-gjen-soft:#1E2329;
  --on-tilstand:#0B0E13; --on-rail-hvit:#FFFFFF;
  --border-strong:#707278; --border:#66686E; --border-hairline:#44464B;
  --danger:#F5978B; --on-danger:#2A0C08; --warning-fg:#EFC06B; --ok-fg:#7FCBAE;
  --merke-ring:#EDEEF0; --merke-farge:#A9ACB3; --merke-sveip:#C9CCD2;
  --radius-sm:6px; --radius-md:10px;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg-app:#1B1C1F; --bg-canvas:#1B1C1F;
    --surface-1:#1B1C1F; --surface-2:#232427; --surface-3:#2A2C30;
    --fg-1:#EDEEF0; --fg-2:#C3C5CA; --fg-3:#B9BCC2;
    --rail:#151619; --rail-fg:#EDEEF0; --rail-mute:#A9ACB3; --rail-on:rgba(255,255,255,.13);
    --ciron-teal:#93B4E8; --teal-fg:#93B4E8; --teal-soft:#232427; --on-teal:#0B0E13;
    --aksent-2:#EFC06B; --on-aksent-2:#0B0E13;
    --tilstand-hverdag:#7FCBAE; --tilstand-hverdag-soft:#16241F;
    --tilstand-skjerpet:#EFC06B; --tilstand-skjerpet-soft:#2B2412;
    --tilstand-hendelse:#F5978B; --tilstand-hendelse-soft:#2E1A17;
    --tilstand-gjen:#A9BACD; --tilstand-gjen-soft:#1E2329;
    --on-tilstand:#0B0E13; --on-rail-hvit:#FFFFFF;
    --border-strong:#707278; --border:#66686E; --border-hairline:#44464B;
    --danger:#F5978B; --on-danger:#2A0C08; --warning-fg:#EFC06B; --ok-fg:#7FCBAE;
    --merke-ring:#EDEEF0; --merke-farge:#A9ACB3; --merke-sveip:#C9CCD2;
    --radius-sm:6px; --radius-md:10px;
    color-scheme:dark;
  }
}

/* Øvrige tokener fra v0.6–v0.10: avstand, skygge, tilstandsfarger, ease. Uendret. */
:root{
  --ciron-navy:#001A2F;
  --ciron-white:#FDFDFD;
  --teal-100:#CFE7E2;
  --teal-200:#A2D0C7;
  --teal-400:#4E9D90;
  --teal-600:#2F6A60;
  --teal-800:#173630;
  --success:#0A6E5C;
  --warning:#B85100;
  --info:#1F5F84;
  --success-fg:#7AD0BD;
  --danger-fg:#F4998E;
  --info-fg:#7DBAE0;
  --radius-lg:22px;
  --radius-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Tilstandsfarger — ISO 22324. Alle par målt til minst 7:1. */
:root{
  --state-ovelse-fg:#154466; --state-ovelse-bg:#EAF2F9;
  --state-ovelse-band-a:#2C6C9E; --state-ovelse-band-b:#1E5480;
  --state-ovelse-band-fg:#EAF2F9; --state-ovelse-tag-bg:#0A1F30; --state-ovelse-tag-fg:#8FC4E8;
  --state-hendelse-fg:#7A241A; --state-hendelse-bg:#FFF1EF;
  --state-hendelse-band:#7A241A; --state-hendelse-band-fg:#FFF1EF;
  --state-normal-fg:#0A5445; --state-normal-bg:#ECF7F4;
  --state-ukjent-fg:#414B55; --state-ukjent-bg:#F2F4F6;
  --sev-1-fg:#0A5445; --sev-2-fg:#665000; --sev-3-fg:#7E4206; --sev-4-fg:#7A241A; --on-danger:#FFFFFF;
  --print-ink:#000000; --print-paper:#FFFFFF;
}
html[data-theme="dark"]{
  --state-ovelse-fg:#8FC4E8; --state-ovelse-bg:#0A1F30;
  --state-normal-fg:#7AD0BD; --state-normal-bg:#06231D;
  --state-hendelse-fg:#F4998E; --state-hendelse-bg:#2A0F0B;
  --state-ukjent-fg:#A8B2BD; --state-ukjent-bg:#151C24;
  --sev-1-fg:#7AD0BD; --sev-2-fg:#E8CE72; --sev-3-fg:#F2B06A; --sev-4-fg:#F4998E;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
  --state-ovelse-fg:#8FC4E8; --state-ovelse-bg:#0A1F30;
  --state-normal-fg:#7AD0BD; --state-normal-bg:#06231D;
  --state-hendelse-fg:#F4998E; --state-hendelse-bg:#2A0F0B;
  --state-ukjent-fg:#A8B2BD; --state-ukjent-bg:#151C24;
  --sev-1-fg:#7AD0BD; --sev-2-fg:#E8CE72; --sev-3-fg:#F2B06A; --sev-4-fg:#F4998E;
}
}

/* Skygger og glass fra v0.6 — brukes av komponentene, uavhengig av tema. */
:root{
  --glass-border:rgba(14,20,27,.12);
  --glass-tint:rgba(253,253,253,.88);
  --shadow-2:0 1px 2px rgba(0,26,47,.06);
  --shadow-5:0 10px 30px rgba(0,26,47,.10),0 2px 6px rgba(0,26,47,.06);
}
html[data-theme="dark"]{
  --glass-border:rgba(255,255,255,.10);
  --glass-tint:rgba(0,33,60,.55);
  --shadow-2:0 2px 6px rgba(0,0,0,.45);
  --shadow-5:0 24px 56px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
  --glass-border:rgba(255,255,255,.10);
  --glass-tint:rgba(0,33,60,.55);
  --shadow-2:0 2px 6px rgba(0,0,0,.45);
  --shadow-5:0 24px 56px rgba(0,0,0,.6);
  }
}

/* Grunnskrift for alle sider (M45-2). Uten denne faller alt som ikke har egen
   regel til nettleserens serif — som hjemmesiden gjorde. */
html{font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body{font-family:var(--font-sans);color:var(--fg-1);background:var(--bg-app)}

/* Tokener fra skissen som manglet i uttrekket (M57). */
:root{
  --fg-link:#17557E;
  --glass-edge:inset 0 1px 0 0 rgba(255,255,255,.9);
  --shadow-3:0 2px 6px rgba(0,26,47,.07),0 1px 2px rgba(0,26,47,.05);
  --motif-grid:linear-gradient(rgba(0,26,47,.05) 1px,transparent 1px) 0 0/32px 32px,
               linear-gradient(90deg,rgba(0,26,47,.05) 1px,transparent 1px) 0 0/32px 32px;
}

/* Tokener fra skissen som manglet i uttrekket (M57). */
html[data-theme="dark"]{
  --fg-link:#7DBAE0;
  --glass-edge:inset 0 1px 0 0 rgba(255,255,255,.10);
  --shadow-3:0 6px 16px rgba(0,0,0,.5);
  --motif-grid:linear-gradient(rgba(78,157,144,.06) 1px,transparent 1px) 0 0/32px 32px,
               linear-gradient(90deg,rgba(78,157,144,.06) 1px,transparent 1px) 0 0/32px 32px;
}
/* ── v0.39: flatene ─────────────────────────────────────────────────
   Grensesnittet leste som en skisse fordi kortene hadde SAMME farge som
   flaten under dem. Da bærer en hårstrek all struktur, og øyet finner ingen
   kant. Perle er fortsatt arbeidsflaten — kortene ligger nå oppå den.

   `--kant-kort` er lysere enn `--border` med vilje: når kortet har en egen
   flate og en skygge, trenger ikke kanten å rope. */
:root{
  --surface-kort:#FFFFFF;
  /* Kanten bærer fortsatt struktur og må nå 3:1 (WCAG 1.4.11). Målt til
     3,25:1 mot den hvite kortflaten. Nå som kortet også har egen flate,
     skygge og romsligere marg, er kanten belte i tillegg til bukseseler —
     men regelen er vår egen, og vi bøyer den ikke for å få det penere. */
  --kant-kort:#868FA2;
  --kort-skygge:0 1px 2px rgba(0,26,47,.05),0 2px 8px rgba(0,26,47,.05);
  --kort-skygge-hev:0 2px 4px rgba(0,26,47,.06),0 8px 20px rgba(0,26,47,.08);
}
html[data-theme="dark"]{
  --surface-kort:#232427;
  --kant-kort:#6C6E72;
  --kort-skygge:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --kort-skygge-hev:0 2px 4px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --surface-kort:#232427;
    --kant-kort:#6C6E72;
    --kort-skygge:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --kort-skygge-hev:0 2px 4px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.45);
  }
}