/* ==========================================================================
   EduPlaner 2026 — tokeny designu
   Źródło: docs/materialy/szablon-html-od-ewy-ver1 — inline <style> (linie 17–30) + wartości
   używane bezpośrednio w markupie. Patrz docs/szablon/01-ANALIZA-SZABLONU.md §2.
   Zasada: żaden kolor nie może pojawić się w kodzie sekcji na sztywno.
   ========================================================================== */

:root {

  /* --- Podstawa --- */
  --ep-tlo:          #FCF8F3;
  --ep-powierzchnia: #F2E9DE;
  --ep-tekst:        #2B2420;
  --ep-brzeg:        color-mix(in srgb, #3B3156 22%, transparent);

  /* --- Fiolet (kolor wiodący) --- */
  --ep-fiolet:     #6B5CA5;
  --ep-fiolet-100: #F6F2FB;
  --ep-fiolet-200: #EBE4F7;
  --ep-fiolet-300: #D8CDEE;
  --ep-fiolet-400: #B3A4DC;
  --ep-fiolet-500: #9182C6;
  --ep-fiolet-600: #7C6BB4;
  --ep-fiolet-700: #63539A;
  --ep-fiolet-800: #4B3D7A;
  --ep-fiolet-900: #332B54;

  /* --- Koral (akcja, CTA) --- */
  --ep-koral:     #E8450A;
  --ep-koral-100: #FDF0EA;
  --ep-koral-200: #FBDCCE;
  --ep-koral-300: #F6BCA0;
  --ep-koral-400: #F1875A;
  --ep-koral-500: #E8450A;
  --ep-koral-600: #C93A06;
  --ep-koral-700: #A33005;
  --ep-koral-800: #7A2404;
  --ep-koral-900: #511803;

  /* --- Kolory spoza ramp, używane w markupie źródłowym --- */
  --ep-braz:          #8B6C4E;  /* nadtytuły sekcji, hover linków */
  --ep-braz-ciemny:   #69513A;  /* tekst pomocniczy, jednostki, podpisy */
  --ep-akapit:        #4C4139;  /* akapity */
  --ep-lista:         #382F28;  /* pozycje list w akordeonach */
  --ep-podpis:        #4B2C8C;  /* podpis odręczny autorki */
  --ep-na-ciemnym:    #F7F2EA;  /* tekst na ciemnym tle */
  --ep-na-koralu:     #FFF7F3;  /* tekst na przycisku CTA */
  --ep-blad:          #8E3B3B;  /* komunikat błędu formularza */
  --ep-ramka-mocna:   rgba(75, 61, 122, 0.45);  /* obramowanie .ep-blueprint */
  --ep-ramka-slaba:   rgba(59, 49, 86, 0.22);
  --ep-ramka-wlos:    rgba(59, 49, 86, 0.14);

  /* --- Gradienty powtarzalne --- */
  --ep-grad-cta:        linear-gradient(168deg, #F1601F, #E8450A);
  --ep-grad-cta-hover:  linear-gradient(168deg, #F1601F, #C93A06);
  --ep-grad-karta:      linear-gradient(160deg, #FFFFFF 0%, #FDFAF6 100%);
  --ep-grad-karta-cieplo: linear-gradient(158deg, #FFFFFF 0%, #FBF5EE 100%);
  --ep-grad-karta-fiolet: linear-gradient(158deg, #FBFAFD 0%, #F1EEF7 100%);
  --ep-grad-panel:      linear-gradient(160deg, #F4EFFC, #EAE1F6);
  --ep-grad-ikona:      linear-gradient(160deg, #F1EAFB, #E4DAF6);
  --ep-grad-kreska:     linear-gradient(90deg, #E8450A, #F1875A);
  --ep-grad-pion:       linear-gradient(180deg, #B3A4DC, #6B5CA5 55%, #E8450A);
  --ep-grad-ciemny:     linear-gradient(140deg, #443A66 0%, #332B54 46%, #241E3C 100%);

  /* --- Cienie --- */
  --ep-cien-karta:      0 1px 2px rgba(51,43,84,0.05), 0 14px 28px -14px rgba(51,43,84,0.24);
  --ep-cien-karta-hover:0 3px 6px rgba(51,43,84,0.07), 0 30px 50px -18px rgba(51,43,84,0.34);
  --ep-cien-panel:      0 2px 4px rgba(51,43,84,0.06), 0 30px 56px -22px rgba(51,43,84,0.4);
  --ep-cien-mocny:      0 2px 4px rgba(51,43,84,0.07), 0 40px 70px -26px rgba(51,43,84,0.45);
  --ep-cien-cta:        0 8px 18px -8px rgba(122,36,4,0.5), 0 3px 0 #A33005;
  --ep-cien-cta-hover:  0 12px 24px -8px rgba(122,36,4,0.6), 0 2px 0 #A33005;

  /* --- Typografia ---
     Decyzja A2: Mulish wszędzie — spójność z aplikacją EduPlaner.
     Mulish jest fontem zmiennym (200–1000), więc jedna rodzina obsługuje
     wszystkie wagi. Allura wyłącznie na podpisie autorki. */
  --ep-font:         'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ep-font-naglowek:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ep-font-podpis:  'Allura', 'Dancing Script', cursive;

  --ep-waga-naglowek: 700;
  --ep-waga-mocna:    800;

  /* --- Wymiary --- */
  --ep-kontener:     1180px;
  --ep-kontener-pad: 32px;
  --ep-sekcja-gora:  84px;
  --ep-sekcja-dol:   20px;
  --ep-promien:      20px;   /* .ep-blueprint */
  --ep-promien-sm:   10px;   /* przyciski, pola */
  --ep-promien-md:   12px;
  --ep-promien-lg:   16px;

  /* --- Punkt podziału ---
     Decyzja A3: dwie wersje serwisu. Do 1000 px włącznie — mobile,
     powyżej — desktop 1:1 z szablonem. Nie dokładamy pośrednich
     breakpointów układu; poniżej 1000 px korygujemy tylko skalę. */
  --ep-bp: 1000px;
}