/* ============================================================================
   tokens.css - decyzje wizualne. Jedyne miejsce, w którym wolno wpisać
   konkretną wartość koloru, rozmiaru czy odstępu.

   Reguła nadrzędna: żaden inny plik CSS nie zawiera wartości spoza tych skal.
   Jeśli w komponencie potrzebny jest `padding: 22px`, to znaczy, że skala jest
   zła - poprawiamy skalę, nie obchodzimy ją. To jest cała różnica między
   systemem a zbiorem osobno wymyślonych bloków.

   Kierunek: PRZYRZĄD, nie broszura. Aplikacja bierze cudze pliki i podejmuje
   za użytkownika decyzje statystyczne, więc ma wyglądać jak narzędzie
   pomiarowe: gęsto, monochromatycznie, z jednym akcentem zarezerwowanym dla
   akcji. Charakter buduje typografia i rytm, nie kolor.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Kroje ---------------------------------------------------------------
     Podział jest znaczący, nie estetyczny: krojem systemowym pisze APLIKACJA,
     monospace'em - DANE UŻYTKOWNIKA (nazwy kolumn, wartości, próbki). Dzięki
     temu na ekranie planu widać na pierwszy rzut oka, co jest cudzą treścią,
     a co naszym komentarzem do niej. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* --- Skala typograficzna -------------------------------------------------
     Pięć stopni. Nie dziewięć: im więcej stopni, tym mniej każdy z nich
     znaczy, a hierarchia rozmywa się w gradient. Podstawa 15px zamiast 16 -
     ekran planu jest gęsty i 16px robi się na nim rozlazły. */
  --fs-xs:   0.75rem;    /* 12px - metadane, liczniki, przypisy */
  --fs-sm:   0.8125rem;  /* 13px - komórki tabeli, kontrolki */
  --fs-base: 0.9375rem;  /* 15px - tekst */
  --fs-lg:   1.125rem;   /* 18px - nagłówki sekcji */
  --fs-xl:   1.5rem;     /* 24px - tytuł strony */

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.6;

  /* Trzy grubości. 700 nie ma świadomie - nagłówek pogrubiony do oporu jest
     najczęstszym objawem hierarchii robionej siłą zamiast strukturą. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;

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

  /* --- Geometria -----------------------------------------------------------
     3px, nie 12px. Duże zaokrąglenia zmieniają narzędzie w aplikację mobilną;
     poza tym tabela o zaokrąglonych komórkach nie istnieje w żadnym poważnym
     interfejsie danych. */
  --radius: 3px;
  --radius-sm: 2px;

  --page: 1180px;      /* jedna szerokość treści na całą aplikację */
  --gutter: var(--space-6);
  --measure: 68ch;     /* miara tekstu ciągłego - dłuższy wiersz źle się wraca */

  /* Miara BLOKU, w rem. Osobna od `--measure`, bo tamta jest w `ch` i zmienia
     się razem ze stopniem pisma elementu: pudełko pisane mniejszym krojem
     wychodzi węższe od akapitu obok, mimo że oba mają „tę samą" miarę.
     Dla tekstu ciągłego to zachowanie jest słuszne (ta sama liczba znaków
     w wierszu), dla pudełek - mylące. Wszystko, co ma ramkę albo tło i własny
     stopień pisma, mierzy się tym tokenem. */
  --measure-box: 34rem;

  /* --- Barwy: powierzchnie -------------------------------------------------
     Tło jest ledwo ciepłe (papier), tekst ledwo chłodny. To napięcie jest
     celowe: czysta biel z czystą szarością wygląda jak niewybrana, bo nią
     jest - to domyślne wartości frameworka. */
  --bg:             #fbfaf8;
  --surface:        #ffffff;
  --surface-sunken: #f4f2ee;
  --surface-hover:  #f7f5f2;

  /* --- Barwy: tekst -------------------------------------------------------- */
  --ink:       #14161a;
  --ink-muted: #5c6068;
  --ink-faint: #6e727a;

  /* --- Barwy: linie --------------------------------------------------------
     Dwa poziomy, bo tabela potrzebuje obu: cienka rozdziela wiersze
     szczegółów, mocniejsza - kolumny pliku od siebie nawzajem. */
  --rule:        #e6e3dd;
  --rule-strong: #d4d0c8;

  /* --- Barwa akcji ---------------------------------------------------------
     JEDEN akcent i jedno zadanie: „to jest do kliknięcia". Nie dekoruje
     nagłówków, nie podkreśla sekcji, nie wchodzi w tło. Atrament, nie błękit
     frameworka. */
  --accent:        #2a4a86;
  --accent-soft:   #eef1f8;
  --btn-bg:        #2a4a86;
  --btn-bg-hover:  #1d3663;
  --btn-fg:        #ffffff;
  --focus:         #2a4a86;

  /* --- Barwy semantyczne ---------------------------------------------------
     Wyłącznie dla ostrzeżeń i błędów, czyli tam, gdzie kolor niesie znaczenie,
     którego nie da się przekazać inaczej. */
  --warn:         #7d5310;
  --warn-rule:    #cf9a33;
  --warn-surface: #fdf8ec;

  --danger:         #99281d;
  --danger-rule:    #cf9a90;
  --danger-surface: #fdf1ef;

  /* Tło przycisku kasującego. Osobne od `--danger`, bo `--danger` jest kolorem
     TEKSTU i w motywie ciemnym jest jasny - biały napis na nim byłby nieczytelny.
     Zmierzone wobec bieli: 7,4:1 w jasnym, 6,7:1 w ciemnym. */
  --btn-danger-bg:       #a02a1f;
  --btn-danger-bg-hover: #822017;

  /* Strzałka selecta rysowana, nie systemowa - wersja jasna. */
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6068' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Jedyny cień w systemie i wolno go użyć wyłącznie temu, co naprawdę unosi
     się nad stroną (menu, okno modalne). Karta z cieniem to nie głębia, tylko
     szum - kartę robi obrys. */
  --shadow-pop: 0 4px 16px rgb(20 22 26 / 0.12);

  --dur: 110ms;   /* jedna długość przejścia w całej aplikacji */
}

/* --- Motyw ciemny ---------------------------------------------------------
   Dwa wejścia: preferencja systemowa oraz jawny wybór (`data-theme`), gdy
   dojdzie przełącznik. Zmieniają się wyłącznie wartości tokenów - ani jedna
   reguła komponentu nie wie, który motyw jest aktywny. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:             #131418;
    --surface:        #1a1c21;
    --surface-sunken: #16181c;
    --surface-hover:  #202329;

    --ink:       #e7e5e0;
    --ink-muted: #9ba0a8;
    --ink-faint: #868a93;

    --rule:        #2a2d33;
    --rule-strong: #3b3f47;

    --accent:       #86a8e4;
    --accent-soft:  #1b2233;
    --btn-bg:       #3a5d9e;
    --btn-bg-hover: #4a70b8;
    --btn-fg:       #ffffff;
    --focus:        #86a8e4;

    --warn:         #dfb063;
    --warn-rule:    #7d6021;
    --warn-surface: #211d14;

    --danger:         #e39a90;
    --danger-rule:    #6f3229;
    --danger-surface: #231614;

    --btn-danger-bg:       #a3372b;
    --btn-danger-bg-hover: #b8402f;

    --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba0a8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

    --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #131418;
  --surface:        #1a1c21;
  --surface-sunken: #16181c;
  --surface-hover:  #202329;

  --ink:       #e7e5e0;
  --ink-muted: #9ba0a8;
  --ink-faint: #868a93;

  --rule:        #2a2d33;
  --rule-strong: #3b3f47;

  --accent:       #86a8e4;
  --accent-soft:  #1b2233;
  --btn-bg:       #3a5d9e;
  --btn-bg-hover: #4a70b8;
  --btn-fg:       #ffffff;
  --focus:        #86a8e4;

  --warn:         #dfb063;
  --warn-rule:    #7d6021;
  --warn-surface: #211d14;

  --danger:         #e39a90;
  --danger-rule:    #6f3229;
  --danger-surface: #231614;

  --btn-danger-bg:       #a3372b;
  --btn-danger-bg-hover: #b8402f;

  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ba0a8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");

  --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.5);
}