/* ============================================================
   FysioFlow — designtokens
   Kilde: mockups/Current/DESIGN-SPEC.md §2, §3, §4
   Værdierne her SKAL matche iOS-appens Color Sets 1:1.
   Ret aldrig en farve her uden også at rette DESIGN-SPEC.md.
   ============================================================ */

:root {
  /* Primær */
  --p:    #2563EB;
  --p-dk: #1D4ED8;
  --p-lt: #EFF6FF;
  --p-md: #DBEAFE;
  --p-xl: #F0F7FF;
  --p-tx: #FFFFFF;
  --p-bd: #2563EB;

  /* Flader */
  --bg:  #FFFFFF;
  --s1:  #F8FAFC;
  --s2:  #F1F5F9;
  --bd:  #E2E8F0;
  --bd2: #CBD5E1;

  /* Tekst */
  --tx:  #0F172A;
  --mu:  #64748B;
  --mu2: #94A3B8;

  /* Semantisk: grøn = god, gul = moderat, rød = alvorlig */
  --ok:    #10B981;
  --ok2:   #DCFCE7;
  --ok-tx: #15803D;
  --wa:    #F59E0B;
  --wa2:   #FEF9C3;
  --wa-tx: #92400E;
  --er:    #EF4444;
  --er2:   #FEE2E2;
  --er-tx: #991B1B;

  /* Form & dybde */
  --r:   10px;
  --rl:  16px;
  --sh:  0 2px 8px rgba(0, 0, 0, .06);
  --shm: 0 4px 20px rgba(0, 0, 0, .1);
  --shl: 0 8px 32px rgba(0, 0, 0, .1);

  /* Typografi */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

[data-theme="dark"] {
  --p:    #1E90FF;
  --p-dk: #0070E0;
  --p-lt: rgba(30, 144, 255, .13);
  --p-md: rgba(30, 144, 255, .22);
  --p-xl: rgba(30, 144, 255, .08);
  --p-tx: #071628;
  --p-bd: rgba(30, 144, 255, .42);

  --bg:  #080E1C;
  --s1:  #0F1829;
  --s2:  #162135;
  --bd:  #1E2E46;
  --bd2: #253650;

  --tx:  #EFF6FF;
  --mu:  #7A8FA6;
  --mu2: #4A5F78;

  --ok:    #10B981;
  --ok2:   rgba(16, 185, 129, .15);
  --ok-tx: #6EE7B7;
  --wa:    #F59E0B;
  --wa2:   rgba(245, 158, 11, .15);
  --wa-tx: #FCD34D;
  --er:    #EF4444;
  --er2:   rgba(239, 68, 68, .15);
  --er-tx: #FCA5A5;

  --sh:  0 2px 12px rgba(0, 0, 0, .4);
  --shm: 0 8px 32px rgba(0, 0, 0, .5);
  --shl: 0 16px 48px rgba(0, 0, 0, .5);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--s2);
  min-height: 100vh;
  transition: background-color .25s, color .2s;
}
[data-theme="dark"] body { background: var(--bg) }

a { text-decoration: none; color: var(--p) }

/* Synligt fokus for tastaturbrugere (mockup'en manglede dette) */
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Temaknap (delt mellem login og portal) ── */
.tt {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s1); border: 1px solid var(--bd);
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s; flex-shrink: 0;
}
[data-theme="dark"] .tt { background: var(--s2) }
.tt:hover { background: var(--s2) }
.tt svg {
  width: 14px; height: 14px; fill: none; stroke: var(--mu);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic-sun { display: none } .ic-moon { display: block }
[data-theme="dark"] .ic-sun { display: block }
[data-theme="dark"] .ic-moon { display: none }

/* ── Logo ── */
.lm {
  width: 28px; height: 28px; background: var(--p); border-radius: 7px;
  display: grid; place-items: center; color: var(--p-tx);
  font-size: 12px; font-weight: 900; flex-shrink: 0;
  transition: background-color .25s;
}