/* Motyw: kolory i fonty marki jako zmienne (rozdz. 14 spec, D37). Wymiana wyglądu to zmiana tego
   pliku, a nie kodu. Wartości z księgi znaku Campus GROW (docs/klient/marka/, wersja 1.0).
   Fonty serwuje aplikacja (bez Google Fonts, D33): pochodzenie i licencje w ../fonty/.
   Tu są paleta i wartości ról w jasnej skórce, a w motyw-ciemny.css wartości tych samych ról
   w ciemnej (D106). Nowa rola dostaje wartość w obu plikach, inaczej test zatrzymuje CI.
   Po zmianie motywu, układu albo logo strona przerwy dla reverse proxy powstaje od nowa:
   `python manage.py strona_przerwy` (#179), a bez tego test zatrzymuje CI. */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonty/NotoSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonty/NotoSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 300 700; /* czcionka zmienna; używamy 700 (nagłówki, księga znaku) */
  font-display: swap;
  src: url("../fonty/Comfortaa-wght.ttf") format("truetype");
}

:root {
  /* Paleta marki. */
  --grow-navy: #00306f;
  --grow-navy-dark: #001f4a;
  --grow-teal: #00a3ad;
  --grow-green: #58b300;
  --grow-bg-light: #f4f7fa;
  --grow-bg-dark: #071a2e;
  --grow-text: #13273a;
  --grow-linia: #dce6ee;
  --grow-tekst-drugi: #5e7183;
  --grow-biel: #ffffff;
  /* Turkus akcentowy ma za mały kontrast jako kolor tekstu; linki używają ciemniejszej skali. */
  --grow-teal-700: #006970;
  --grow-teal-800: #004e53;
  --grow-navy-600: #00275b;
  /* Kolory komunikatów spoza palety marki, tylko do ostrzeżeń i błędów (prototyp, wspolne.css). */
  --grow-info-tlo: #e6f6f7;
  --grow-ok-tlo: #eef7e4;
  --grow-uwaga-tlo: #fdefcf;
  --grow-uwaga-tekst: #6b4500;
  --grow-uwaga-ramka: #c98a00;
  --grow-blad-tlo: #fbe3e1;
  --grow-blad-tekst: #8a1f17;
  /* Stan „gotowe”, pasek postępu i wyróżnienia list (prototyp: `st-gotowe`, `nr gotowa`,
     `postep-pasek`, `jezyki-lista`). */
  --grow-green-50: #c4e4a5;
  --grow-green-700: #397400;
  --grow-green-800: #2a5500;
  --grow-teal-100: #72ccd1;
  --grow-neutral-tlo: #eef2f6;
  /* Stany egzaminów (prototyp: `st-zarezerwowany`, `st-do_zapisania`, `st-propozycja`,
     `st-nie_dotyczy`). */
  --grow-teal-50: #a5dee2;
  --grow-teal-600: #00858d;
  --grow-navy-100: #728daf;
  --grow-neutral-pasek: #e3e9ef;
  /* Ciemna skórka (motyw-ciemny.css, D106): skale i tła z księgi znaku (str. 3), w tym tło
     „Ciemne” na karty, i kolory komunikatów spoza palety dobrane jak w jasnej. */
  --grow-ciemne: #0d2944;
  --grow-navy-50: #a5b6cc;
  --grow-navy-200: #3f6393;
  --grow-teal-200: #3fbac1;
  --grow-green-200: #81c63f;
  --grow-uwaga-tlo-ciemne: #3f2d00;
  --grow-uwaga-tekst-ciemne: #ffd27a;
  --grow-blad-tlo-ciemne: #4d1410;
  --grow-blad-tekst-ciemne: #ffb4a8;

  /* Pola formularzy i paski przewijania w kolorach skórki. */
  color-scheme: light;

  /* Role kolorów w interfejsie: układ odwołuje się tylko do nich. */
  --kolor-tlo: var(--grow-bg-light);
  --kolor-powierzchnia: var(--grow-biel);
  --kolor-tekst: var(--grow-text);
  --kolor-tekst-drugi: var(--grow-tekst-drugi);
  --kolor-naglowki: var(--grow-navy);
  --kolor-link: var(--grow-teal-700);
  --kolor-link-najechany: var(--grow-teal-800);
  --kolor-linia: var(--grow-linia);
  /* Ciemniejszy turkus z księgi: #00a3ad miał na tle strony 2,85:1, a wskaźnik fokusu wymaga
     3:1 wobec tła (WCAG 2.1, 1.4.11; test w testy/test_dostepnosc.py, #64). */
  --kolor-fokus: var(--grow-teal-700);
  --kolor-przeskocz-tlo: var(--grow-navy);
  --kolor-przeskocz-tekst: var(--grow-biel);
  /* Przyciski i bieżąca pozycja menu: granat, kolor nawigacji z księgi. */
  --kolor-przycisk: var(--grow-navy);
  --kolor-przycisk-najechany: var(--grow-navy-600);
  --kolor-przycisk-tekst: var(--grow-biel);
  /* Komunikaty: informacja, powodzenie, ostrzeżenie, błąd. Tło nie niesie znaczenia samo:
     komunikat mówi je tekstem. */
  --kolor-info-tlo: var(--grow-info-tlo);
  --kolor-info-ramka: var(--grow-teal);
  --kolor-ok-tlo: var(--grow-ok-tlo);
  --kolor-ok-ramka: var(--grow-green);
  --kolor-uwaga-tlo: var(--grow-uwaga-tlo);
  --kolor-uwaga-tekst: var(--grow-uwaga-tekst);
  --kolor-uwaga-ramka: var(--grow-uwaga-ramka);
  --kolor-blad-tlo: var(--grow-blad-tlo);
  --kolor-blad-tekst: var(--grow-blad-tekst);
  /* Stan sekcji (prototyp: `status`): znaczenie niosą symbol i tekst, a kolor je powtarza. */
  --kolor-gotowe-tlo: var(--grow-green-50);
  --kolor-gotowe-tekst: var(--grow-green-800);
  --kolor-gotowe-znak: var(--grow-green-700);
  --kolor-postep: var(--grow-green);
  --kolor-postep-tlo: var(--grow-neutral-tlo);
  /* Stany egzaminu (prototyp: `status st-…`). Tekst zwolnienia i „nie dotyczy” jest ciemniejszy
     niż w prototypie, bo szary z prototypu ma na szarym tle kontrast poniżej 4,5:1. */
  --kolor-zarezerwowany-tlo: var(--grow-teal-50);
  --kolor-zarezerwowany-tekst: var(--grow-teal-800);
  --kolor-propozycja-ramka: var(--grow-teal-600);
  --kolor-do-zapisania-ramka: var(--grow-navy-100);
  --kolor-neutralny-tlo: var(--grow-neutral-tlo);
  --kolor-neutralny-pasek: var(--grow-neutral-pasek);
  /* Wyróżniona pozycja listy, np. język oferowany w roku. */
  --kolor-wyroznienie-tlo: var(--grow-info-tlo);
  --kolor-wyroznienie-ramka: var(--grow-teal-100);
  --kolor-wyroznienie-tekst: var(--grow-teal-800);
  --cien-karty: 0 1px 2px rgba(19, 39, 58, .06), 0 4px 16px rgba(19, 39, 58, .06);
  /* Okno dialogowe i zasłona strony za nim (prototyp `wspolne.css`, #212). */
  --cien-okna: 0 20px 60px rgba(7, 26, 46, .35);
  --kolor-zaslona: rgba(7, 26, 46, .45);
  /* Logo nagłówka: kolorowe w jasnej skórce, negatyw w ciemnej (D107). Strona ma oba pliki,
     a widać jeden, więc wydruk z ciemnej skórki ma logo kolorowe. */
  --logo-kolor: block;
  --logo-negatyw: none;

  /* Fonty: Comfortaa tylko w nagłówkach, Noto Sans w reszcie (gęste tabele też). */
  --font-naglowki: "Comfortaa", "Noto Sans", system-ui, sans-serif;
  --font-tekst: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --promien-karty: 14px;
  --promien-przycisku: 10px;
  --promien-maly: 8px;
}