/* ============================================================
 * tokens.css — design tokens (CSS custom properties)
 * Granat (navy) zamiast teal z makiety. Aliasy --teal:* zachowują
 * zgodność z klasami/selektorami przeniesionymi 1:1 z makiety.
 * ============================================================ */

:root {
  /* ── Granat: rampa kolorów podstawowych ───────────────────── */
  --primary:        #003467;
  --primary-dark:   #002447;
  --primary-mid:    #004D99;
  --primary-light:  #2E6CA8;

  /* Aliasy zgodne z makietą (teal → granat) — NIE usuwać */
  --teal:        var(--primary);
  --teal-mid:    var(--primary-mid);
  --teal-light:  var(--primary-light);
  --teal-soft:   rgba(0, 52, 103, .05);

  /* ── Akcenty (z logo — drzewko); wartości bez zmian ───────── */
  --leaf-orange: #E8922E;
  --leaf-green:  #4CB050;
  --leaf-blue:   #3B8FD4;
  --leaf-purple: #7B5EA7;
  --leaf-pink:   #D45B8A;
  --leaf-yellow: #F2C94C;
  /* Przyciemniony pomarańcz: stan hover przycisków akcji. */
  --leaf-orange-dark: #D4821F;

  /* Aliasy akcentów (czytelniejsze nazwy semantyczne) */
  --accent-orange: var(--leaf-orange);
  --accent-green:  var(--leaf-green);
  --accent-blue:   var(--leaf-blue);
  --accent-purple: var(--leaf-purple);
  --accent-pink:   var(--leaf-pink);
  --accent-yellow: var(--leaf-yellow);

  /* ── Tła / krem / biel / ciemne ───────────────────────────── */
  --cream:       #FAFBF9;
  --cream-warm:  #F6F4F0;
  --white:       #fff;
  --dark:        #06182C; /* granatowa czerń (stopka) — granatowy odpowiednik ciemnego tła z makiety */

  /* ── Tekst (szarości) ─────────────────────────────────────────
     Wszystkie cztery poziomy spełniają WCAG AA (4,5:1) na KAŻDYM tle
     używanym w motywie: biel, --cream, --cream-warm i --border-light.
     Najsłabszy przypadek to zawsze --border-light (#EDF0EF), bo na nim
     siedzą odznaki i liczniki przy zakładkach.

     Wcześniej --text-light dawał 3,70:1, a --text-muted tylko 2,11:1,
     mimo że niosą realne treści: numer projektu, rozmiar i datę pliku PDF,
     etykiety w panelu informacji, godziny otwarcia. Strona instytucji
     finansowanej z UE podlega ustawie o dostępności cyfrowej, więc to nie
     była kwestia gustu. Odcień (zielonkawa szarość) został bez zmian,
     zmieniła się wyłącznie jasność.

     Kontrast na bieli / na --border-light:
       --text        16,39 / 14,29
       --text-mid     8,67 /  7,56
       --text-light   6,99 /  6,09
       --text-muted   5,48 /  4,78
     Licząc nowe wartości, sprawdź wzorem WCAG na wszystkich czterech tłach,
     nie tylko na bieli. */
  --text:        #152220;
  --text-mid:    #3D4F4C;
  --text-light:  #4A5D5A;
  --text-muted:  #5A6D6A;

  /* ── Obramowania (bez zmian) ──────────────────────────────── */
  --border:       #DFE6E4;
  --border-light: #EDF0EF;

  /* ── Typografia (fonty self-hosted) ───────────────────────── */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Layout ───────────────────────────────────────────────── */
  --max-w: 1340px;
  --container-pad: clamp(20px, 4vw, 48px);

  /* Wysokość paska nagłówka. Od niej zależą: odstęp treści pod nagłówkiem,
     pozycja mega menu, przyklejona belka filtrów w katalogu i menu mobilne.
     Zmieniaj TYLKO tutaj. Skala instytucjonalna, wzorem serwisów publicznych. */
  --header-h: 100px;

  /* Promienie */
  --r:    4px;
  --r-md: 6px;

  /* ── Skala odstępów ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Cienie (granat) ──────────────────────────────────────── */
  --shadow-sm: 0 4px 16px rgba(0, 52, 103, .06);
  --shadow-md: 0 12px 40px rgba(0, 52, 103, .10);
  --shadow-lg: 0 20px 56px rgba(0, 52, 103, .12);

  /* Easing wspólny dla animacji */
  --ease: cubic-bezier(.16, 1, .3, 1);
}