/* MafyListener – teeman tokenit. Ainoa tiedosto, jossa on värejä; muu CSS ja JS käyttää näitä muuttujia.
   Vaalea teema Mafyn sinisillä (mafy.fi); tumma teema omina askelinaan, ei automaattista kääntöä.
   Kaavioiden sarjavärit: dataviz-viitepaletti, tarkistettu validate_palette.js:llä näitä pintoja vastaan
   (vaalea #ffffff, tumma #161c2c). Kolmen vaalean sävyn kontrasti < 3:1 → kaavioissa aina selite ja taulukko. */
:root {
  color-scheme: light;
  --mafy-main: #01317d;
  --mafy-1: #0043a8;
  --mafy-2: #0066fd;
  --mafy-3: #54a2fd;
  --mafy-4: #cde4ff;

  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f8;
  --text: #0b1a33;
  --text-2: #475569;
  --text-3: #64748b;
  --line: #e2e7ef;
  --line-strong: #c8d1df;
  /* Tekstikentän reunus: kentän ainoa tunniste (tausta sama kuin kortin), joten vähintään 3:1 pintaa vasten */
  --field-line: #7d8799;
  --accent: #0066fd;
  --accent-strong: #0043a8;
  --accent-soft: #e8f1ff;
  /* Täytetty pinta, jolla on --on-accent-teksti (päänappi, valittu vastaus): kontrasti vähintään 4,5:1 */
  --accent-fill: #0066fd;
  --accent-fill-hover: #0043a8;
  --on-accent: #ffffff;
  --brand: #01317d;
  --focus: #0066fd;
  --shadow: 0 1px 2px rgb(11 26 51 / 0.06), 0 4px 16px rgb(11 26 51 / 0.06);
  --shadow-l: 0 12px 40px rgb(11 26 51 / 0.18);
  --scrim: rgb(11 26 51 / 0.45);
  --fox-halo: transparent;

  --ok: #0f7a43;
  --ok-bg: #e5f5ec;
  --warn: #8a5a00;
  --warn-bg: #fff4d6;
  --danger: #b42318;
  --danger-bg: #fdecea;

  /* Periytymisen tilat lomake-editorissa */
  --st-base: #64748b;
  --st-base-bg: #f1f4f8;
  --st-mod: #a64b00;
  --st-mod-bg: #fff1e3;
  --st-hidden: #7a8599;
  --st-hidden-bg: #f3f4f6;
  --st-extra: #5b46c9;
  --st-extra-bg: #f0edfd;
  --st-common: #0b6b5b;
  --st-common-bg: #e3f5f1;

  /* Kaaviot */
  --chart-surface: #ffffff;
  --grid: #e8ebf0;
  --axis: #c3c9d4;
  --ink-muted: #6b7280;
  --deemph: #cdd3dd;
  --national: #64748b; /* vertailusarja (valtakunnallinen) Mafyn sinisen (--accent) rinnalla */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #6250d6;
  --s8: #e34948;
  --all-series: #1f2937;
  --div-pos: #2a78d6;
  --div-pos-2: #86b6ef;
  --div-neg: #e34948;
  --div-neg-2: #f2a3a2;
  --div-mid: #dcdcd7;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 0.5rem;
  --r: 0.75rem;
  --r-l: 1.1rem;
  --pill: 999px;
  --t-fast: 0.12s;
  --t: 0.25s;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0c111d;
    --surface: #161c2c;
    --surface-2: #1b2336;
    --surface-3: #222b40;
    --text: #eef2f8;
    --text-2: #b7c2d4;
    --text-3: #93a0b5;
    --line: #283149;
    --line-strong: #3a4562;
    --field-line: #7a88a3;
    --accent: #4f94ff;
    --accent-strong: #8fbaff;
    --accent-soft: #1b2b4d;
    /* --accent (#4f94ff) on valkoiselle tekstille liian vaalea (2,99:1); täyttö 4,99:1 ja hover 5,67:1 */
    --accent-fill: #2d6bd8;
    --accent-fill-hover: #2563c9;
    --on-accent: #ffffff;
    --brand: #8fbaff;
    --focus: #8fbaff;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    --shadow-l: 0 12px 40px rgb(0 0 0 / 0.5);
    --scrim: rgb(0 0 0 / 0.6);
    /* Ketun tummansininen ääriviiva katoaisi tummaan pintaan ilman vaaleaa hehkua (sama kuin MafyLANissa) */
    --fox-halo: rgb(205 228 255 / 0.3);
    --ok: #5fd39a;
    --ok-bg: #12301f;
    --warn: #f5c451;
    --warn-bg: #3a2d0c;
    --danger: #ff8a80;
    --danger-bg: #3d1614;
    --st-base: #93a0b5;
    --st-base-bg: #1f2738;
    --st-mod: #ffb066;
    --st-mod-bg: #3a2512;
    --st-hidden: #8792a6;
    --st-hidden-bg: #1d2331;
    --st-extra: #b3a6ff;
    --st-extra-bg: #2a2550;
    --st-common: #6fd8c3;
    --st-common-bg: #13302b;
    --chart-surface: #161c2c;
    --grid: #252e43;
    --axis: #3a4562;
    --ink-muted: #8d97a8;
    --deemph: #3b465f;
    --national: #6b7280;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #008300;
    --s7: #9085e9;
    --s8: #e66767;
    --all-series: #eef2f8;
    --div-pos: #3987e5;
    --div-pos-2: #1c5cab;
    --div-neg: #e66767;
    --div-neg-2: #8e3434;
    --div-mid: #3a3f4b;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; }
}