/*
  Rahbeck · designtokens (forslag A, Neon, valgt af Emil 6/10)

  Layout: topbar med logo, menu og værktøjer; indholdet ligger i et gitter af
  kort på et mørkt, lilla underlag med orange→pink→lilla glød. Mørk først, lys som valg.

  data-tema="moerk|lys" på <html> sættes af app.js ud fra brugerens valg,
  værtens data-theme eller systemets indstilling.
  Hvert token defineres først på :root (mørk). [data-tema="lys"] definerer hele sættet igen.
  Positionsfarverne er kontrolleret for farveblindhed og kontrast mod kortene.
*/

:root {
  color-scheme: dark;

  --font-display: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-pill: 999px;

  --text: #F3F0FF;
  --text-2: #BDB6E0;
  --text-3: #8C86B3;

  --good: #34D399;
  --good-bg: rgba(52, 211, 153, .13);
  --bad: #FB7185;
  --bad-bg: rgba(251, 113, 133, .13);
  --warn: #FBBF24;
  --warn-bg: rgba(251, 191, 36, .13);
  --info: #8FB2FF;
  --info-bg: rgba(143, 178, 255, .13);

  --pos-cbb: #9466FF;
  --pos-sl: #E9692C;
  --pos-kt: #14A3BF;
  --pos-grp: #4F86F7;
  --pos-off: #6E6890;

  --grid: rgba(189, 182, 224, .10);
  --axis: rgba(189, 182, 224, .30);
  --track: rgba(167, 139, 250, .15);
  --area-top: .30;
  --line-glow: drop-shadow(0 0 5px rgba(255, 79, 160, .55));

  --bg: #0A0820;
  --bg-art:
    radial-gradient(1100px 640px at 6% -10%, rgba(124, 58, 237, .40), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(236, 72, 153, .20), transparent 60%),
    radial-gradient(900px 640px at 55% 115%, rgba(249, 115, 22, .12), transparent 60%);
  --header-bg: rgba(10, 8, 32, .72);
  --surface: rgba(24, 18, 56, .84);
  --surface-solid: #151032;
  --surface-2: rgba(40, 32, 88, .55);
  --surface-3: rgba(58, 46, 120, .60);
  --overlay: rgba(5, 3, 20, .62);

  --line: rgba(167, 139, 250, .16);
  --line-strong: rgba(167, 139, 250, .32);

  --r-card: 22px;
  --r-ctl: 12px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 44px -26px rgba(0, 0, 0, .65);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7);
  --glow: drop-shadow(0 0 7px rgba(255, 79, 160, .45));

  --accent: #B79CFF;
  --accent-fill: #7C3AED;
  --accent-bg: rgba(139, 92, 246, .16);
  --grad-1: #FF9A62;
  --grad-2: #FF4FA0;
  --grad-3: #8B5CF6;
  --grad-main: linear-gradient(120deg, var(--grad-1), var(--grad-2) 48%, var(--grad-3));

  --nav-active-bg: linear-gradient(120deg, rgba(255, 79, 160, .30), rgba(139, 92, 246, .42));
  --nav-active-fg: #FFFFFF;
  --btn-bg: linear-gradient(120deg, #F0458F, #8B5CF6);
  --btn-fg: #FFFFFF;
  --btn-shadow: 0 10px 26px -10px rgba(240, 69, 143, .65);
  --focus: #FF8FC8;
}

:root[data-tema="lys"] {
  color-scheme: light;

  --text: #1B1534;
  --text-2: #4A4466;
  --text-3: #6E6890;

  --good: #047857;
  --good-bg: rgba(4, 120, 87, .10);
  --bad: #BE123C;
  --bad-bg: rgba(190, 18, 60, .08);
  --warn: #B45309;
  --warn-bg: rgba(180, 83, 9, .10);
  --info: #3355CC;
  --info-bg: rgba(51, 85, 204, .08);

  --pos-cbb: #7C3AED;
  --pos-sl: #EA580C;
  --pos-kt: #0891B2;
  --pos-grp: #2B5FD9;
  --pos-off: #A39FBA;

  --grid: rgba(27, 21, 52, .08);
  --axis: rgba(27, 21, 52, .24);
  --track: rgba(124, 58, 237, .12);
  --area-top: .20;
  --line-glow: none;

  --bg: #F6F3FF;
  --bg-art:
    radial-gradient(1000px 560px at 6% -10%, rgba(139, 92, 246, .20), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(236, 72, 153, .12), transparent 60%),
    radial-gradient(900px 640px at 55% 115%, rgba(249, 115, 22, .08), transparent 60%);
  --header-bg: rgba(246, 243, 255, .80);
  --surface: rgba(255, 255, 255, .92);
  --surface-solid: #FFFFFF;
  --surface-2: #F3EFFE;
  --surface-3: #E9E3FC;
  --overlay: rgba(27, 21, 52, .38);

  --line: rgba(76, 52, 170, .12);
  --line-strong: rgba(76, 52, 170, .26);

  --shadow-card: 0 1px 2px rgba(40, 20, 90, .04), 0 18px 40px -26px rgba(60, 30, 140, .30);
  --shadow-pop: 0 24px 60px -20px rgba(40, 20, 90, .35);
  --glow: drop-shadow(0 2px 6px rgba(236, 72, 153, .28));

  --accent: #6D28D9;
  --accent-fill: #7C3AED;
  --accent-bg: rgba(124, 58, 237, .10);
  --grad-1: #F97316;
  --grad-2: #EC4899;
  --grad-3: #7C3AED;

  --nav-active-bg: linear-gradient(120deg, rgba(236, 72, 153, .14), rgba(124, 58, 237, .20));
  --nav-active-fg: #3B1D8F;
  --btn-bg: linear-gradient(120deg, #DB2777, #7C3AED);
  --btn-fg: #FFFFFF;
  --btn-shadow: 0 10px 22px -10px rgba(219, 39, 119, .55);
  --focus: #7C3AED;
}