/* ==================================================================
   Tokeny odtwarzaczy EduHero -- ZGODNE Z MARKA
   ==================================================================
   Wartosci pochodza z KREGOSLUPA MARKI w style.css (":root BRAND TOKEN
   SPINE") oraz z themes_config.json, a NIE z palety "Szlak" z
   lesson-player-v3.css. To byla poprzednia wersja tego pliku i blad:
   v3 ma wlasna tozsamosc wizualna (zielen szlaku), ktora nie jest
   kolorem marki platformy. Marka jest niebieska -- style.css:
   "pivoted from teal-anchored to blue-led per the actual approved mockup".

   Zrodla, do ktorych trzeba wracac przy zmianie:
     --primary-color  #4684a9  (style.css, kit Canva, potwierdzone na CI)
     --primary-hover  #396c8b
     --page-bg        #f8f9fa
     --text-dark      #002d6b  (themes_config.json -> default)
     --text-muted     #6c757d
     --card-border    #e5e7eb
   Motyw ciemny bierze wartosci z themes_config.json -> midnight, zeby
   odtwarzacz nie wymyslal wlasnej nocy.

   NAZWY MOTYWOW SA WSPOLNE Z lesson-player-v3.css (szlak / zmierzch / pergamin /
   kontrast) i to nie jest kwestia gustu: oba odtwarzacze czytaja i zapisuja ten
   sam klucz localStorage 'lp3_theme'. Wlasne nazwy w tym pliku ('jasny',
   'ciemny') sprawily 2026-08-16, ze kazdy uczen po wizycie w lekcji STEM
   otwieral zwykla lekcje z data-theme, dla ktorego v3 nie ma zadnych tokenow --
   i cala lekcja traciła tla. Paleta zostaje wlasna (marka), wspolna jest NAZWA.

   DOSTEPNOSC -- policzone, nie oszacowane:
   biel na #4684a9 to 4,09:1. Wystarcza dla elementow UI i duzego tekstu
   (3:1), ale NIE dla zwyklego tekstu (4,5:1). Dlatego sa dwa tokeny:
     --accent        #4684a9  ramki, ikony, obwodki, akcenty
     --accent-strong #396c8b  wypelnienia przyciskow i tekst (5,69:1)
   To jest dokladnie ta pulapka, ktora CLAUDE.md opisuje przy --on-primary:
   "anything using background: var(--primary-color); color: #fff is below
   the 3:1 floor" na siedmiu motywach. Nie powtarzamy jej tutaj.

   UWAGA: lesson-player-v3.css nadal ma wlasne bloki tokenow (3651 linii pod
   glownym odtwarzaczem calej platformy -- przelaczenie go to osobna decyzja).
   Do tego czasu zmiane tokenu trzeba nanosic w obu miejscach.
   ================================================================== */

:root {
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 6px 24px rgba(0, 45, 107, .10);
  --shadow-soft: 0 2px 10px rgba(0, 45, 107, .07);
  --island-fill: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, white 6%) 0%, var(--surface) 60%, color-mix(in srgb, var(--surface) 100%, black 2%) 100%);
}

/* Motyw jasny -- domyslny motyw platformy */
:root,
html[data-theme="szlak"] {
  --bg: #f8f9fa;
  --contour: rgba(70, 132, 169, .10);
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --ink: #002d6b;
  --muted: #6c757d;
  --line: #e5e7eb;
  --accent: #4684a9;
  --accent-strong: #396c8b;
  --accent-ink: #ffffff;
  --gold: #b45309;
  --gold-soft: #fef3c7;
  --good: #2E7D5B;
  --good-soft: #e6f4ee;
  --bad: #b3261e;
  --bad-soft: #fdecea;
  --hl: #fff3ce;
  --island-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px -14px rgba(0,45,107,.18), 0 2px 8px rgba(0,45,107,.07);
  --island-shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 5px 14px -8px rgba(0,45,107,.2);
}

/* Motyw ciemny -- wartosci z themes_config.json -> midnight */
html[data-theme="zmierzch"] {
  --bg: #000314;
  --contour: rgba(47, 179, 162, .10);
  --surface: #1e293b;
  --surface-2: #334155;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #334155;
  --accent: #2FB3A2;
  --accent-strong: #2FB3A2;
  --accent-ink: #063E38;
  --gold: #fbbf24;
  --gold-soft: #3d3419;
  --good: #4CC98F;
  --good-soft: #16382a;
  --bad: #f2a0a0;
  --bad-soft: #3a262a;
  --hl: #4a3f16;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --shadow-soft: 0 2px 10px rgba(0,0,0,.35);
  --island-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -14px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --island-shadow-sm: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px -8px rgba(0,0,0,.5);
}

/* Pergamin -- cieply wariant. Istnieje, bo NAZWY MOTYWOW SA WSPOLNE z
   lesson_playerem: uczen, ktory wybral tam Pergamin, musi dostac cos sensownego
   takze tutaj. Bez tego bloku data-theme="pergamin" nie trafia w zaden zestaw
   tokenow i cala strona traci tla (dokladnie ten blad zdarzyl sie 2026-08-16
   w druga strone). */
html[data-theme="pergamin"] {
  --bg: #F6EEDF;
  --contour: rgba(70, 132, 169, .10);
  --surface: #FFFBF2;
  --surface-2: #F4EBDB;
  --ink: #002d6b;
  --muted: #7a6a52;
  --line: #E4D6BC;
  --accent: #4684a9;
  --accent-strong: #396c8b;
  --accent-ink: #ffffff;
  --gold: #b45309;
  --gold-soft: #F5E3BD;
  --good: #2E7D5B;
  --good-soft: #E4EFDA;
  --bad: #b3261e;
  --bad-soft: #F0DDD6;
  --hl: #F7E7B0;
  --island-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 26px -14px rgba(90,60,20,.2), 0 2px 8px rgba(90,60,20,.1);
  --island-shadow-sm: 0 1px 0 rgba(255,255,255,.8) inset, 0 5px 14px -8px rgba(90,60,20,.22);
}

/* Motyw kontrastowy -- dostepnosc, nie marka. Celowo poza paleta CI:
   jego zadaniem jest maksymalna czytelnosc, nie zgodnosc kolorystyczna. */
html[data-theme="kontrast"] {
  --bg: #000000;
  --contour: transparent;
  --surface: #101010;
  --surface-2: #1b1b1b;
  --ink: #ffffff;
  --muted: #e0e0e0;
  --line: #6b6b6b;
  --accent: #ffd400;
  --accent-strong: #ffd400;
  --accent-ink: #000000;
  --gold: #ffd400;
  --gold-soft: #333000;
  --good: #47e68c;
  --good-soft: #0e3320;
  --bad: #ff9faa;
  --bad-soft: #3a1e22;
  --hl: #4a4000;
  --shadow: none;
  --shadow-soft: none;
  --island-fill: var(--surface);
  --island-shadow: none;
  --island-shadow-sm: none;
}