/* ── Design tokens ─────────────────────────────────────────────────────
   Kaartspel aan de keukentafel, niet een dashboard: diep pruim met
   confetti-accenten. Geen groen laken.

   Structuur zoals het Nodge-sjabloon: donker is de basis, licht komt via
   prefers-color-scheme en via data-theme als iemand het forceert.
   ────────────────────────────────────────────────────────────────────── */

/* Donker (standaard) */
:root {
  --color-text:             #f6ecff;
  --color-text-muted:       #b6a2d8;
  --color-bg:               #1e1233;
  --color-bg-diep:          #150b26;
  --color-surface:          #2c1d4a;
  --color-surface-2:        #3a2760;
  --color-border:           #4b3376;
  --color-primary:          #ff8a3d;
  --color-primary-hover:    #ff7a1f;
  --color-primary-20:       rgba(255, 138, 61, 0.2);
  --color-secondary:        #56cfe1;
  --color-secondary-20:     rgba(86, 207, 225, 0.2);
  --color-accent:           #3ddc97;
  --color-accent-20:        rgba(61, 220, 151, 0.2);
  --color-muted-20:         rgba(182, 162, 216, 0.2);
  --color-overlay:          rgba(12, 6, 22, 0.72);
  --color-on-primary:       #2a1200;
  --color-hover:            rgba(255, 255, 255, 0.07);
  --color-active:           rgba(255, 255, 255, 0.13);
  --color-error:            #ff5d73;
  --color-error-bg:         rgba(255, 93, 115, 0.14);
  --color-succes:           #3ddc97;
  --color-succes-bg:        rgba(61, 220, 151, 0.14);

  /* Vier stoelen, vier kleuren. Overal dezelfde toewijzing. */
  --speler-0:               #ff6b6b;
  --speler-1:               #ffc145;
  --speler-2:               #56cfe1;
  --speler-3:               #c77dff;

  /* Kaarten zijn altijd wit met zwarte of rode tekens, ook in donkere modus. */
  --kaart-bg:               #ffffff;
  --kaart-rand:             rgba(0, 0, 0, 0.25);
  --kaart-rood:             #d62828;
  --kaart-zwart:            #1a1423;
  --kaart-rug:              #6a3fae;

  --font-ui:      ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: ui-rounded, 'SF Pro Rounded', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-code:    ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 26px;

  --schaduw:    0 10px 30px rgba(0, 0, 0, 0.38);
  --schaduw-sm: 0 3px 10px rgba(0, 0, 0, 0.28);

  --sfeer: radial-gradient(120% 80% at 12% -8%, rgba(199, 125, 255, 0.34), transparent 58%),
           radial-gradient(110% 70% at 96% 4%, rgba(255, 138, 61, 0.26), transparent 55%),
           radial-gradient(120% 90% at 50% 108%, rgba(86, 207, 225, 0.2), transparent 60%);
}

/* Licht (voorkeur van de browser) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:           #33204a;
    --color-text-muted:     #75618e;
    --color-bg:             #fff6ec;
    --color-bg-diep:        #f7e2cd;
    --color-surface:        #ffffff;
    --color-surface-2:      #fff0e0;
    --color-border:         #f0d7bd;
    --color-primary:        #e8590c;
    --color-primary-hover:  #d34f08;
    --color-primary-20:     rgba(232, 89, 12, 0.18);
    --color-secondary:      #0b7285;
    --color-secondary-20:   rgba(11, 114, 133, 0.18);
    --color-accent:         #0ca678;
    --color-accent-20:      rgba(12, 166, 120, 0.18);
    --color-muted-20:       rgba(117, 97, 142, 0.18);
    --color-overlay:        rgba(51, 32, 74, 0.55);
    --color-on-primary:     #ffffff;
    --color-hover:          rgba(51, 32, 74, 0.06);
    --color-active:         rgba(51, 32, 74, 0.12);
    --color-error:          #c92a2a;
    --color-error-bg:       rgba(201, 42, 42, 0.1);
    --color-succes:         #0ca678;
    --color-succes-bg:      rgba(12, 166, 120, 0.12);

    --speler-0:             #e03131;
    --speler-1:             #e8930c;
    --speler-2:             #1098ad;
    --speler-3:             #9c36b5;

    --kaart-rand:           rgba(0, 0, 0, 0.18);
    --kaart-rug:            #7048c4;

    --schaduw:    0 10px 28px rgba(120, 75, 40, 0.18);
    --schaduw-sm: 0 3px 10px rgba(120, 75, 40, 0.14);

    --sfeer: radial-gradient(120% 80% at 12% -8%, rgba(255, 193, 69, 0.35), transparent 58%),
             radial-gradient(110% 70% at 96% 4%, rgba(255, 107, 107, 0.24), transparent 55%),
             radial-gradient(120% 90% at 50% 108%, rgba(86, 207, 225, 0.26), transparent 60%);
  }
}

/* Licht (handmatig geforceerd) */
:root[data-theme="light"] {
  --color-text:           #33204a;
  --color-text-muted:     #75618e;
  --color-bg:             #fff6ec;
  --color-bg-diep:        #f7e2cd;
  --color-surface:        #ffffff;
  --color-surface-2:      #fff0e0;
  --color-border:         #f0d7bd;
  --color-primary:        #e8590c;
  --color-primary-hover:  #d34f08;
  --color-primary-20:     rgba(232, 89, 12, 0.18);
  --color-secondary:      #0b7285;
  --color-secondary-20:   rgba(11, 114, 133, 0.18);
  --color-accent:         #0ca678;
  --color-accent-20:      rgba(12, 166, 120, 0.18);
  --color-muted-20:       rgba(117, 97, 142, 0.18);
  --color-overlay:        rgba(51, 32, 74, 0.55);
  --color-on-primary:     #ffffff;
  --color-hover:          rgba(51, 32, 74, 0.06);
  --color-active:         rgba(51, 32, 74, 0.12);
  --color-error:          #c92a2a;
  --color-error-bg:       rgba(201, 42, 42, 0.1);
  --color-succes:         #0ca678;
  --color-succes-bg:      rgba(12, 166, 120, 0.12);

  --speler-0:             #e03131;
  --speler-1:             #e8930c;
  --speler-2:             #1098ad;
  --speler-3:             #9c36b5;

  --kaart-rand:           rgba(0, 0, 0, 0.18);
  --kaart-rug:            #7048c4;

  --schaduw:    0 10px 28px rgba(120, 75, 40, 0.18);
  --schaduw-sm: 0 3px 10px rgba(120, 75, 40, 0.14);

  --sfeer: radial-gradient(120% 80% at 12% -8%, rgba(255, 193, 69, 0.35), transparent 58%),
           radial-gradient(110% 70% at 96% 4%, rgba(255, 107, 107, 0.24), transparent 55%),
           radial-gradient(120% 90% at 50% 108%, rgba(86, 207, 225, 0.26), transparent 60%);
}