/* Tumman asun tokenit. Sivujen tyylit lukevat värinsä näistä, joten suurin osa pinnoista ja teksteistä
   kääntyy tässä. Sininen (--navy) on vaaleassa asussa sekä tekstin että pintojen väri: täällä se on tekstin
   väri, ja pinnoille tuotettu kerros palauttaa alkuperäisen sinisen. */
html[data-kampanja-asu="tumma"] {
  color-scheme: dark;

  --bg:           #07080d;
  --surface:      #0e1017;
  --surface-2:    #141722;
  --border:       #252a3b;
  --text:         #f2f3f8;
  --text-muted:   #a6abbd;

  --navy:         #e4e8ff;
  --navy-dark:    #eef0ff;
  --navy-deeper:  #ffffff;
  --navy-50:      #12162c;
  --navy-100:     #1c2244;

  --pink-50:      #2a0f1f;
  --orange-50:    #2a190b;

  --grad-warm:    linear-gradient(135deg, #17100a 0%, #190d17 100%);
  --grad-soft:    linear-gradient(135deg, #21150b 0%, #230f1b 100%);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 8px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 24px 64px -12px rgba(0, 0, 0, 0.6);
  --sh-warm: 0 12px 32px -8px rgba(245, 128, 36, 0.28), 0 4px 12px rgba(245, 128, 36, 0.14);

  /* Valokeilan ja hehkun väri kolmena kanavana. */
  --kv-hehku: 255 158 84;
}

/* Cyber Monday vaihtaa lämpimät korostusvärit neoniin. Pinnat ovat samat, sävy kylmempi. Sininen ja pinkki
   ovat niin syviä, että valkoinen napin teksti erottuu niistä yhtä hyvin kuin oranssista ja pinkistä. */
html[data-kampanja="cm"][data-kampanja-asu="tumma"] {
  --bg:           #05060f;
  --surface:      #0a0c1b;
  --surface-2:    #101329;
  --border:       #232a52;

  --orange:       #1ea7ff;
  --orange-soft:  #7fd4ff;
  --orange-50:    #07222a;
  --pink:         #f035c8;
  --pink-soft:    #ff9be9;
  --pink-50:      #2a0c26;
  --red:          #7b61ff;
  --magenta:      #f035c8;

  --grad:         linear-gradient(90deg,  #1ea7ff 0%, #7b61ff 50%, #f035c8 100%);
  --grad-tilt:    linear-gradient(135deg, #1ea7ff 0%, #7b61ff 50%, #f035c8 100%);
  --grad-v:       linear-gradient(180deg, #1ea7ff 0%, #7b61ff 50%, #f035c8 100%);
  --grad-warm:    linear-gradient(135deg, #071620 0%, #160a22 100%);
  --grad-soft:    linear-gradient(135deg, #082028 0%, #1f0c2b 100%);
  --sh-warm: 0 12px 32px -8px rgba(62, 242, 255, 0.3), 0 4px 12px rgba(255, 79, 216, 0.16);

  --kv-hehku: 80 228 255;
}

/* Valaistuina pysyvät osat (chat, lomakemodaalit, suostumusikkuna) saavat vaalean asun tokenit takaisin.
   body rajataan pois: Kipinän sivupaneeli lisää sille luokan kip-companion-open, ja ilman rajausta koko sivu
   sai vaalean asun värit tummien pintojen päälle (tummansininen teksti tummalla pohjalla). */
html[data-kampanja-asu="tumma"] :is(.tarjous-dialog, .aineisto-dialog, .analytics-consent, [class^="kip-"]:not(body), [class*=" kip-"]:not(body)) {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f8f9fb;
  --surface-2: #f2f4f8;
  --border: #e8eaef;
  --text: #151515;
  --text-muted: #6f6f6f;
  --navy: #2d3a7d;
  --navy-dark: #232e66;
  --navy-deeper: #1a2452;
  --navy-50: #eef0f8;
  --navy-100: #d5daed;
  --pink-50: #fdeaf3;
  --orange-50: #fff2e6;
  --grad-warm: linear-gradient(135deg, #fff8f0 0%, #fff0fa 100%);
  --grad-soft: linear-gradient(135deg, #fff2e6 0%, #fdeaf3 100%);
  --sh-sm: 0 1px 2px rgba(35, 46, 102, 0.04), 0 2px 6px rgba(35, 46, 102, 0.04);
  --sh-md: 0 4px 8px rgba(35, 46, 102, 0.06), 0 8px 24px rgba(35, 46, 102, 0.08);
  --sh-lg: 0 12px 24px -8px rgba(35, 46, 102, 0.12), 0 24px 64px -12px rgba(35, 46, 102, 0.18);
}