/* Fargevariabler for lys/mørk modus. Standard følger prefers-color-scheme,
   men kan overstyres via [data-theme] satt av js/app.js. */

:root {
  --farge-bakgrunn: #f4f7f5;
  --farge-overflate: #ffffff;
  --farge-overflate-hevet: #ffffff;
  --farge-tekst: #1a2620;
  --farge-tekst-svak: #5a6a60;
  --farge-kant: #dce4de;
  --farge-primar: #1f7a4d;
  --farge-primar-hover: #17603b;
  --farge-primar-tekst: #ffffff;
  --farge-suksess: #2e9e5b;
  --farge-fare: #c94a3d;
  --farge-advarsel: #c98a1f;
  --farge-funnet: #2e9e5b;
  --farge-ikke-funnet: #9aa39c;
  --skygge: 0 2px 10px rgba(20, 30, 24, 0.08);
  --skygge-hevet: 0 6px 24px rgba(20, 30, 24, 0.14);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --farge-bakgrunn: #121814;
    --farge-overflate: #1b2420;
    --farge-overflate-hevet: #222d27;
    --farge-tekst: #eaf2ec;
    --farge-tekst-svak: #a3b3a9;
    --farge-kant: #2c3931;
    --farge-primar: #3ca86e;
    --farge-primar-hover: #4cc182;
    --farge-primar-tekst: #0c130f;
    --farge-suksess: #3ca86e;
    --farge-fare: #e2685a;
    --farge-advarsel: #e0a63c;
    --farge-funnet: #3ca86e;
    --farge-ikke-funnet: #5a6a60;
    --skygge: 0 2px 10px rgba(0, 0, 0, 0.3);
    --skygge-hevet: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --farge-bakgrunn: #121814;
  --farge-overflate: #1b2420;
  --farge-overflate-hevet: #222d27;
  --farge-tekst: #eaf2ec;
  --farge-tekst-svak: #a3b3a9;
  --farge-kant: #2c3931;
  --farge-primar: #3ca86e;
  --farge-primar-hover: #4cc182;
  --farge-primar-tekst: #0c130f;
  --farge-suksess: #3ca86e;
  --farge-fare: #e2685a;
  --farge-advarsel: #e0a63c;
  --farge-funnet: #3ca86e;
  --farge-ikke-funnet: #5a6a60;
  --skygge: 0 2px 10px rgba(0, 0, 0, 0.3);
  --skygge-hevet: 0 6px 24px rgba(0, 0, 0, 0.45);
}

body {
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst);
}