/* ============================================================================
   TOKENY PANELU RAPA — jedyne zrodlo prawdy o kolorach, odstepach i krojach.
   Wygenerowane z prototyp-panel.html, nie edytowac recznie po obu stronach.
   Kolor marki (--brand) jest WLASNOSCIA AUTOMATU, nie interfejsu: klient widzi
   barwe swojej maszyny. W Blazorze podstawia sie go na .app przez style="".
   ========================================================================== */
:root{
  /* Para krojów: Open Sans niesie tekst (dłuższe zdania, opisy, pola),
     Titillium — nagłówki, liczby i wersaliki. Titillium w akapicie robi się
     wąski i techniczny, Open Sans w wielkim nagłówku traci charakter. */
  --font:"Open Sans","Segoe UI",system-ui,sans-serif;
  --font-tyt:"Titillium Web","Titillium","Open Sans",system-ui,sans-serif;

  /* POWIERZCHNIE Z TWOJEJ MAKIETY (glass-panel), AKCENT Z KIOSKU.
     Skala szarości wprost z `Panel CL WEB.html`: base #131517, panel #1d2025,
     hover #25282f, border #2e3138. Szary panel na ciemnym tle czyta się lepiej
     niż karta prawie czarna na czarnym. Akcentem jest magenta marki — nic błękitnego. */
  /* Czarno-stalowe. Pasek jak w kiosku — czysta czerń. Karty zostają SZARE
     (decyzja z 3.08: „ten szary jest lepiej czytelny"), ale bez niebieskiego
     zafarbu z makiety VendingOS — same neutralne stale. */
  /* Skala przyciemniona o stopień (Damian, 13.08): „szarawy delikatnie
     przyciemnić, większy kontrast; czarny prawie 90%, a gdzie całkiem czarny —
     100%". Pasek zostaje CZYSTĄ czernią jak w kiosku, strona schodzi bliżej
     niej, a karty z 89% czerni na ~91% — dzięki temu rosną naraz dwie rzeczy:
     kontrast tekstu na karcie i różnica między kartą a paskiem. Karty ZOSTAJĄ
     szare, nie czarne — decyzja z 3.08 („ten szary jest lepiej czytelny") stoi. */
  --page:#08080A; --bar:#000000;
  --surface:#16171A; --surface-2:#1E2023; --surface-3:#0D0E10; --surface-press:#25272B;
  --stal:rgba(255,255,255,.05);   /* światło na górnej krawędzi — blacha, nie karton */

  /* Kontrasty liczone wobec --surface (#16171A).
     Tekst NIE JEST czystą bielą (Damian, 13.08: „nie musi być całkiem biała,
     dajemy lekki kolor, więcej szarego"). Biel na ciemnym tle jarzy się i męczy
     oko przy dłuższym czytaniu; zejście do stalowej bieli nic nie kosztuje,
     bo karty zeszły do #16171A i kontrast i tak urósł. */
  --ink:#E7EAEF;        /* 12,7:1 — stalowa biel, nie #FFF */
  --ink-muted:#C4C9D2;  /*  9,3:1 */
  --ink-soft:#A6ACB7;   /*  6,5:1 */
  --ink-faint:#8B929D;  /*  4,9:1 */
  --ink-off:#70767F;    /*  3,0:1 — wyłączone */
  --ink-empty:#52585F;  /*  2,0:1 — pusta skrytka */

  --line:#2C2E31; --line-soft:#212325; --line-firm:#3D4045; --line-bar:#000000;
  /* Zebra musi być osobnym tokenem: w motywie jasnym `--surface` i `--surface-3`
     są oba czysto białe, więc pasek co drugi wiersz byłby niewidoczny. */
  --zebra:#1B1C1F;   /* zszedł razem z kartami, żeby pas zebry dalej był ledwie widoczny */

  --brand:#E5097F; --brand-ink:#FF5FA8; --brand-strong:#B00764;
  /* Akcent PASKA PODGLĄDU, osobny od marki. Ekran logowania potrafi zejść do
     stali („konto jeszcze nieznane") i wtedy pasek sterowania też robił się
     szary — a on nie jest częścią produktu i nie ma prawa gasnąć. */
  --dev-akcent:#E5097F;
  --brand-bg:color-mix(in srgb,var(--brand) 18%,var(--surface));

  --good:#12A150; --warn:#E8B45B; --crit:#E5484D;
  --good-ink:#3ECF8E; --warn-ink:#F0C070; --crit-ink:#FF6369;
  --good-bg:#0B2A1B; --warn-bg:#2A210A; --crit-bg:#2D1115;

  --focus:var(--brand-ink);

  /* Skala ściągnięta po zmianie kroju. Open Sans ma znacznie większą wysokość
     x niż Titillium, więc te same piksele robią się optycznie o klasę większe —
     panel zrobił się „taki duży”. Rozmiary spadły o jeden stopień, odstępy też. */
  /* Poprawione w drugą stronę: 13,5 px było już za mało i tekst przestawał się
     czytać. Open Sans przy 14,5 trzyma gęstość, a nie męczy oczu. */
  --fs-h1:24px; --fs-h2:17px; --fs-kpi:34px; --fs-action:14.5px;
  --fs-body:14.5px; --fs-meta:13px; --fs-label:11.5px; --fs-micro:11px;

  /* Titillium nie ma wczytanych 700 i 900 — te dwie wartości zejdą do realnej 600. */
  --fw-light:300; --fw-reg:400; --fw-med:600; --fw-bold:700; --fw-black:900;

  --ctl-h:34px; --ctl-h-lg:42px; --row-h:42px; --touch:42px;
  /* Ostre krawędzie. Kiosk ma 28 px, bo się go dotyka palcem; panel jest
     narzędziem pracy na monitorze i ma czytać się jak przyrząd, nie jak apka. */
  --r-card:2px; --r-ctl:2px; --r-pill:2px;

  --sidebar-w:204px; --topbar-h:50px; --tabbar-h:58px; --content-max:1440px;
  --gap:14px; --gap-lg:20px;

  --t-press:120ms; --t-move:280ms;

  /* Bez tego Chrome rysuje NATYWNE kontrolki w wariancie jasnym: rozwinięty
     kalendarz pola `date`, zegar pola `time`, strzałki pola `number` i paski
     przewijania. Kalendarz wychodził wtedy biały na czarnym panelu i po prostu
     znikał. `color-scheme` przełącza je wszystkie naraz — nie da się tego
     zrobić samym stylowaniem, bo popup kalendarza należy do przeglądarki. */
  color-scheme: dark;
}

.motyw-jasny{
  color-scheme: light;   /* natywny kalendarz i zegar wracają do jasnego wariantu */
  --bar:#FFFFFF; --page:#F2F3F5; --surface:#FFFFFF; --surface-2:#E9EBEE;
  --surface-3:#FFFFFF; --surface-press:#E4E7EA;
  /* --ink-faint było #7C8391 = zmierzone 3,81:1 na bieli, poniżej progu 4,5.
     Dotyczyło ~150 elementów: podpisy pod tytułami, jednostki, zakresy skrytek,
     nagłówki kolumn. Teraz #626B78 = 5,0:1. */
  --ink:#14161A; --ink-muted:#5B6270; --ink-soft:#666D7A; --ink-faint:#626B78;
  --ink-off:#A2A8B2; --ink-empty:#B9BEC7;
  --line:#DFE2E7; --line-soft:#EBEDF0; --line-firm:#CBD0D8; --line-bar:#E3E6EA;
  --zebra:#F5F7F9;
  --brand-ink:var(--brand-strong);
  --brand-bg:color-mix(in srgb,var(--brand) 10%,#FFFFFF);
  --good-ink:#1B6B37; --warn-ink:#8A5A0C; --crit-ink:#B33A2A;
  --good-bg:#E4F3E9; --warn-bg:#FAF0DA; --crit-bg:#FBE6E2;
  --focus:var(--brand-strong);
}