/* ==========================================================================
   JĘZYK GRAFICZNY Systemu „GOTÓW" — JEDYNE ŹRÓDŁO PRAWDY
   --------------------------------------------------------------------------
   wersja:        1.0.0
   aktualizacja:  2026-08-10
   właściciel:    biuro krajowe KSM „Gotów" (wskazać osobę z imienia)
   prawa:         Fundacja Gotów — patrz metryka.json

   ZASADA: żaden kolor, cień, promień ani rozmiar nie pojawia się w kodzie
   systemu jako surowa wartość. Wszystko odwołuje się do tokenu z tego pliku.
   Zmiana języka graficznego = zmiana TEGO pliku i podniesienie wersji.

   RYTM AKTUALIZACJI
     · poprawki pilne (błąd kontrastu, nieczytelność) — 48 godzin, wersja PATCH
     · zmiany planowane — przegląd kwartalny, wersja MINOR
     · zmiana palety serii danych — tylko po ponownej walidacji (patrz niżej), MAJOR

   WALIDACJA PALETY — OBOWIĄZKOWA PRZED KAŻDĄ ZMIANĄ SERII
     Barwy serii danych (--s1..--s3) są dobrane obliczeniowo, nie na oko.
     Przechodzą: pasmo jasności, próg nasycenia, rozróżnialność przy daltonizmie
     (najgorsza para ΔE 9,2 w motywie jasnym i 9,4 w ciemnym, przy progu 8)
     oraz kontrast wobec powierzchni. Czwartej serii NIE WOLNO dodać bez
     powtórzenia walidacji — zamiast niej stosuj „pozostałe" albo małe wielokrotności.

   CHANGELOG
     1.0.0 (2026-08-10) — pierwsza wersja: paleta marki, serie danych, statusy,
       typografia, siatka, cienie, promienie, motyw jasny i ciemny.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- POWIERZCHNIE ------------------------------------------------------ */
  --plane:      #f4f5f7;   /* tło strony */
  --surface:    #ffffff;   /* karta, panel */
  --surface-2:  #fafafb;   /* pasmo wyróżnione */
  --surface-3:  #eef0f3;   /* wgłębienie, tor miernika */

  /* --- ATRAMENT --------------------------------------------------------- */
  --ink:        #0b0b0b;   /* tekst główny */
  --ink-2:      #52514e;   /* tekst drugorzędny */
  --muted:      #898781;   /* etykiety, osie */
  --line:       rgba(11,11,11,.10);
  --line-strong:rgba(11,11,11,.18);

  /* --- MARKA ------------------------------------------------------------ */
  --brand:      #184f95;   /* granat — podstawa */
  --brand-2:    #2a78d6;   /* granat rozjaśniony — akcent interakcji */
  --brand-ink:  #0d366b;   /* granat ciemny — nagłówki */
  --gold:       #eda100;   /* złoto — wezwanie do działania, akcent */
  --gold-ink:   #7a5300;   /* złoto na jasnym tle jako tekst */
  --wash:       rgba(42,120,214,.08);  /* delikatne tło akcentu */

  /* --- SERIE DANYCH (zwalidowane — nie zmieniać bez walidacji) ---------- */
  --s1: #2a78d6;   /* niebieski  */
  --s2: #eb6834;   /* pomarańcz  */
  --s3: #1baf7a;   /* morski     */

  /* --- SKALA SEKWENCYJNA (jedna miara = jedna barwa) -------------------- */
  --seq1: #cde2fb; --seq2: #86b6ef; --seq3: #3987e5; --seq4: #1c5cab; --seq5: #0d366b;

  /* --- STATUSY (zarezerwowane — nigdy jako „seria 4") ------------------- */
  --good:    #0ca30c;
  --warn:    #fab219;
  --serious: #ec835a;
  --crit:    #d03b3b;
  --good-ink:#006300;

  /* --- WYKRESY --------------------------------------------------------- */
  --grid: #e1e0d9;
  --axis: #c3c2b7;

  /* --- CIENIE ---------------------------------------------------------- */
  --shadow:    0 1px 2px rgba(11,11,11,.05), 0 8px 24px -12px rgba(11,11,11,.14);
  --shadow-lg: 0 1px 2px rgba(11,11,11,.06), 0 24px 48px -20px rgba(11,11,11,.24);

  /* --- GRADIENT NAGŁÓWKA ----------------------------------------------- */
  --hero: linear-gradient(160deg, #0d366b 0%, #184f95 46%, #256abf 100%);

  /* --- TYPOGRAFIA ------------------------------------------------------ */
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;   /* jeden krój */
  --fs-hero:   clamp(30px, 4.4vw, 52px);
  --fs-h2:     clamp(21px, 2.5vw, 30px);
  --fs-h3:     16px;
  --fs-body:   14px;
  --fs-lede:   15.5px;
  --fs-small:  12.5px;
  --fs-micro:  11.5px;
  --fs-kpi:    31px;
  --lh-tight:  1.15;
  --lh-body:   1.6;
  --ls-tight:  -.02em;
  --ls-wide:   .14em;      /* nadkreślenia, etykiety wersalikami */
  --w-normal:  400;
  --w-med:     550;
  --w-semi:    650;
  --w-bold:    750;
  --w-black:   800;

  /* --- SIATKA I ODSTĘPY ------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 26px; --sp-7: 34px; --sp-8: 44px; --sp-9: 56px;
  --wrap-max: 1140px;
  --col-gap:  16px;

  /* --- PROMIENIE ------------------------------------------------------- */
  --r-field: 11px;
  --r-card:  14px;
  --r-panel: 16px;
  --r-pill:  999px;
  --r-icon:  10px;

  /* --- INTERAKCJA ------------------------------------------------------- */
  --t-fast: .16s ease;
  --t-med:  .25s ease;
  --t-fill: .5s cubic-bezier(.2,.7,.2,1);
  --hit-min: 44px;          /* minimalne pole dotykowe */
  --focus: 0 0 0 3px rgba(42,120,214,.45);
}

/* ==========================================================================
   MOTYW CIEMNY — DOBRANY, NIE ODWRÓCONY
   Wartości deklarowane pod dwoma zakresami: ustawienie systemu i przełącznik
   użytkownika. Przełącznik musi wygrywać w obie strony.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:#0c0e12; --surface:#151820; --surface-2:#1b1f28; --surface-3:#222732;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#8f8f88;
    --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.20);
    --brand:#3987e5; --brand-2:#5598e7; --brand-ink:#cde2fb;
    --gold:#eda100; --gold-ink:#eda100; --wash:rgba(57,135,229,.14);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --seq1:#0d366b; --seq2:#184f95; --seq3:#2a78d6; --seq4:#5598e7; --seq5:#9ec5f4;
    --good-ink:#0ca30c;
    --grid:#2c2c2a; --axis:#383835;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 1px 2px rgba(0,0,0,.6), 0 24px 48px -20px rgba(0,0,0,.85);
    --hero:linear-gradient(160deg,#080d18 0%,#102b52 48%,#17406f 100%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0c0e12; --surface:#151820; --surface-2:#1b1f28; --surface-3:#222732;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#8f8f88;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.20);
  --brand:#3987e5; --brand-2:#5598e7; --brand-ink:#cde2fb;
  --gold:#eda100; --gold-ink:#eda100; --wash:rgba(57,135,229,.14);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --seq1:#0d366b; --seq2:#184f95; --seq3:#2a78d6; --seq4:#5598e7; --seq5:#9ec5f4;
  --good-ink:#0ca30c;
  --grid:#2c2c2a; --axis:#383835;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 1px 2px rgba(0,0,0,.6), 0 24px 48px -20px rgba(0,0,0,.85);
  --hero:linear-gradient(160deg,#080d18 0%,#102b52 48%,#17406f 100%);
}

/* ==========================================================================
   DOSTĘPNOŚĆ — REGUŁY NIEPODLEGAJĄCE NEGOCJACJI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

:where(a, button, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); }

/* Kolor nigdy nie jest jedynym nośnikiem informacji: każdy status ma ikonę
   i podpis, każde pole heatmapy ma wypisaną liczbę, każdy miernik ma etykietę.
   Ta reguła nie da się wymusić w CSS — pilnuje jej przegląd kwartalny. */

/* ==========================================================================
   ELEMENT „SENS" — obecny na każdym module (treść w teksty.pl.json)
   ========================================================================== */

.sens {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-field);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.sens > summary {
  cursor: pointer; list-style: none;
  font-weight: var(--w-semi); color: var(--ink);
}
.sens > summary::-webkit-details-marker { display: none; }
.sens > summary::before { content: "✳ "; color: var(--gold-ink); }
.sens .slowo {
  display: block; margin-top: var(--sp-2);
  font-style: italic; color: var(--ink);
}
.sens .odn {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-micro); font-weight: var(--w-bold);
  letter-spacing: .04em; color: var(--muted);
}