/* Designtokens (planens afsnit 12.6). Temaet følger enheden som standard
   ([data-tema="system"] eller ingen data-tema); har brugeren selv valgt, vinder
   hendes valg ([data-tema="lys"] eller [data-tema="moerk"]).
   Alt, der skifter mellem lyst og mørkt, går gennem en token her; ingen
   komponentregel må have en hårdkodet farve.

   De to temaer er lige gennemarbejdede — det ene er ikke det andet skruet ned.
   Udtrykket er det samme (farven bærer hastværk, pulsen bærer stilstand), men
   opskriften er lavet til hver sin baggrund:
     mørkt   lys, der siver ud af kanten: tre lag skygge, sheen og et lysstrøg
     lyst    mættet farve i en skarp ring og en blød farvet skygge under kortet;
             på hvidt ses lys ikke, dér bærer mætning og dybde det samme

   Skyggerne er ikke længere kun én: --skygge-kort ligger under hvert kort, og
   --glod-lag-1 og -2 er målene på prioriteringens ring. Begge er oplysninger,
   ikke pynt. */
:root {
  --bg: #F7F8FA;
  --flade: #FFFFFF;
  --flade-2: #EFF1F4;
  --tekst: #1A1F29;
  --tekst-svag: #5C6572;
  --linje: #D9DEE5;
  --accent-rgb: 37, 99, 168;
  --accent: rgb(var(--accent-rgb));
  --accent-tekst: #FFFFFF;
  --accent-bg: rgba(var(--accent-rgb), 0.08);
  --ok: #2E7D5B;
  --ok-bg: rgba(46, 125, 91, 0.10);
  --advar: #A8690E;
  --advar-bg: rgba(168, 105, 14, 0.10);
  --fejl: #B3352C;
  --fejl-bg: rgba(179, 53, 44, 0.08);
  --radius: 8px;
  --skygge-kort: 0 1px 2px rgba(26, 31, 41, 0.08);
  --skrift: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;
  --overgang: 150ms ease;
  color-scheme: light;

  /* ---- Prioriteringens fire farver ----
     Ét mærke, én farve, samme farve i kortets ring og i matricens felt, så et
     kort ser ens ud i begge visninger. Værdierne er valgt, så de også kan bære
     overskriften i matricen: hver af dem har mindst 4,5:1 mod --flade-2. */
  --kv-goer_nu-rgb: 179, 64, 44;
  --kv-planlaeg-rgb: 20, 112, 108;
  --kv-giv_videre-rgb: 143, 100, 20;
  --kv-overvej_at_lukke-rgb: 59, 98, 133;
  --kv-flade: 0.10;

  /* Ringen om kortet. På hvidt bærer mætningen: en skarp 1 px ring i fuld farve
     og en blød farvet skygge, der løfter kortet fra papiret. Ingen glød udad —
     den ville forsvinde mod en lys baggrund og bare gøre kanten grumset.
     De to lag er kun mål (forskydning, sløring, spredning). Farven lægges på i
     tavle.css, fordi en variabel med var(--glod) i sig ville blive slået op her,
     hvor mærkets farve endnu ikke findes, og så blive tom. */
  --glod-lag-1: 0 2px 5px -2px;
  --glod-lag-2: 0 8px 18px -10px;
  --glod-faktor: 0.78;
  --puls-bund: 0.34;

  /* Glasset på kortet. På lys baggrund er glas papir: hvidt øverst, en anelse
     blæk nederst. Lysstrøget i overkanten hører til mørkt tema og er slået fra
     her, fordi hvidt på hvidt ikke er en kant, men en udviskning. */
  --glas-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(26, 31, 41, 0.022));
  --glas-stroeg: none;
  /* Rigtigt glas: kun på det, der er ét ad gangen (kortpanelet, assistentpanelet). */
  --glas-flade: rgba(255, 255, 255, 0.88);
  --glas-sloer: blur(16px) saturate(112%);

  /* Frøen: kortets overkant skal ramme figuren dér, hvor kroppen slipper og
     benene begynder. Højden, overhænget og luften over kortet læser samme tal,
     så de ikke kan drive fra hinanden. */
  --froe-h: 45px;
  --froe-op: -0.58;
  --froe-luft: calc(var(--froe-h) * 0.58 + 5px);
  --froe-skygge: drop-shadow(0 2px 4px rgba(26, 31, 41, 0.3));

  /* Bredder: tavlen og matricen er fuld skærm med et loft, tekstsider har en spalte. */
  --bredde-tekst: 1100px;
  --bredde-tavle: 2200px;
  --bredde-side: clamp(1rem, 2vw, 2.5rem);
}

[data-tema="moerk"] {
  --bg: #12161D;
  --flade: #1B2129;
  --flade-2: #232B35;
  --tekst: #E8ECF1;
  --tekst-svag: #9AA5B4;
  --linje: #2F3844;
  --accent-rgb: 108, 160, 224;
  --accent-tekst: #0F1520;
  --accent-bg: rgba(var(--accent-rgb), 0.14);
  --ok: #5CBE92;
  --ok-bg: rgba(92, 190, 146, 0.14);
  --advar: #E0A650;
  --advar-bg: rgba(224, 166, 80, 0.14);
  --fejl: #E5736B;
  --fejl-bg: rgba(229, 115, 107, 0.14);
  --skygge-kort: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;

  --kv-goer_nu-rgb: 244, 107, 72;
  --kv-planlaeg-rgb: 47, 166, 160;
  --kv-giv_videre-rgb: 217, 161, 59;
  --kv-overvej_at_lukke-rgb: 127, 166, 196;
  --kv-flade: 0.16;

  /* På mørk baggrund siver lyset ud af kanten: en hårfin ring og to lag, der
     falder af udad. Det er dét, Nikolaj kalder den pulserende lyskant. */
  --glod-lag-1: 0 0 11px -4px;
  --glod-lag-2: 0 0 32px -8px;
  --glod-faktor: 1;
  --puls-bund: 0.3;

  --glas-sheen: linear-gradient(152deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 46%, rgba(255, 255, 255, 0.038));
  --glas-stroeg: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  --glas-flade: rgba(27, 33, 41, 0.86);
  --glas-sloer: blur(16px) saturate(140%);

  --froe-skygge: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]):not([data-tema="moerk"]) {
    --bg: #12161D;
    --flade: #1B2129;
    --flade-2: #232B35;
    --tekst: #E8ECF1;
    --tekst-svag: #9AA5B4;
    --linje: #2F3844;
    --accent-rgb: 108, 160, 224;
    --accent-tekst: #0F1520;
    --accent-bg: rgba(var(--accent-rgb), 0.14);
    --ok: #5CBE92;
    --ok-bg: rgba(92, 190, 146, 0.14);
    --advar: #E0A650;
    --advar-bg: rgba(224, 166, 80, 0.14);
    --fejl: #E5736B;
    --fejl-bg: rgba(229, 115, 107, 0.14);
    --skygge-kort: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;

    --kv-goer_nu-rgb: 244, 107, 72;
    --kv-planlaeg-rgb: 47, 166, 160;
    --kv-giv_videre-rgb: 217, 161, 59;
    --kv-overvej_at_lukke-rgb: 127, 166, 196;
    --kv-flade: 0.16;

    --glod-lag-1: 0 0 11px -4px;
    --glod-lag-2: 0 0 32px -8px;
    --glod-faktor: 1;
    --puls-bund: 0.3;

    --glas-sheen: linear-gradient(152deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 46%, rgba(255, 255, 255, 0.038));
    --glas-stroeg: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    --glas-flade: rgba(27, 33, 41, 0.86);
    --glas-sloer: blur(16px) saturate(140%);

    --froe-skygge: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  }
}