/* ============================================================================
   Connect — TOKENY. Jedno źródło prawdy dla wyglądu całego systemu.
   ============================================================================

   ZASADA: każdy kolor, promień, cień i odstęp w systemie ma tu swoją nazwę.
   W kodzie używamy WYŁĄCZNIE var(--nazwa), nigdy wartości wprost.
   Zmiana wyglądu = zmiana w tym pliku, w jednym miejscu, dla całego systemu.

   KOLEJNOŚĆ ŁADOWANIA — ten plik zawsze jako PIERWSZY:
       <link rel="stylesheet" href="css/tokens.css">      <- tutaj
       <link rel="stylesheet" href="css/style.css">       <- komponenty
       <link rel="stylesheet" href="css/<strona>.css">    <- style strony
       <?php renderBrandingHead($branding); ?>            <- kolor organizacji

   config/branding.php nadpisuje na końcu --primary, --primary-hover,
   --primary-light, --primary-ring, --primary-rgb i --chat-mine-bg
   wartościami wybranymi przez organizację. Cieni NIE nadpisuje (od 25.09.2026
   są neutralne w całym systemie — patrz sekcja CIENIE). Wszystko, co
   dziedziczy z tych zmiennych, zmienia kolor razem z nią.

   WARTOŚCI SĄ IDENTYCZNE Z DOTYCHCZASOWYMI. Ten plik niczego nie przemalowuje
   — porządkuje. Wpięcie go nie zmienia wyglądu ani jednego piksela, bo same
   deklaracje zmiennych nic nie stylują, dopóki ktoś ich nie użyje.

   Wersja 1 · 4 września 2026
   ========================================================================= */

:root {
  /* ── MARKA ───────────────────────────────────────────────────────────────
     Wartości domyślne. Organizacja nadpisuje je przez config/branding.php,
     więc NIE wpisujemy tych kolorów nigdzie indziej — inaczej ekran przestanie
     reagować na kolor organizacji.                                          */
  --primary:        #2563eb;
  --primary-hover:  #1d4ed8;
  --primary-light:  rgba(37, 99, 235, 0.10);
  --primary-ring:   rgba(37, 99, 235, 0.22);
  --primary-rgb:    37, 99, 235;

  /* ── POWIERZCHNIE ────────────────────────────────────────────────────── */
  --bg:        #f8fafc;   /* tło strony                   */
  --card:      #ffffff;   /* karta, modal, panel          */
  --surface-2: #f1f5f9;   /* nagłówek tabeli, stopka      */
  --field-bg:  #f8fafc;   /* tło pola formularza          */

  /* ── TEKST ───────────────────────────────────────────────────────────────
     --text-2 i --text-3 są NOWE. Dotąd te odcienie były wpisywane wprost
     (#9ca3af 29x, #94a3b8 13x, #888888 18x, #6c757d 14x) — jeden token
     zastępuje cztery warianty tej samej roli.                              */
  --text:     #0f172a;   /* treść główna                  */
  --muted:    #64748b;   /* opis, etykieta                */
  --text-2:   #64748b;   /* alias --muted, czytelniejsza nazwa */
  --text-3:   #9ca3af;   /* metadane, placeholder, ikony wyłączone */
  --text-inv: #ffffff;   /* tekst na kolorowym tle        */

  /* ── OBRYSY ──────────────────────────────────────────────────────────────
     --border-soft i --border-strong są NOWE — zastępują #dddddd (26x),
     #cccccc (12x) i #e5e7eb rozsiane po stronach bez style.css.            */
  --border:        #e2e8f0;   /* domyślna kreska          */
  --border-soft:   #eef2f6;   /* separator wewnątrz karty */
  --border-strong: #cbd5e1;   /* obrys pola formularza    */

  /* ── CIENIE ──────────────────────────────────────────────────────────────
     Skala wysokości (elevation) — definicja niżej, w regule `body`.
     Dwa pokrętła zamiast pięciu zestawów wartości w pięciu plikach:
       --shadow-rgb  kolor cienia (chłodny grafit w jasnym, czerń w ciemnym)
       --shadow-k    moc cienia (1 w jasnym, 4 w ciemnym — na ciemnym tle
                     cień musi być gęstszy, żeby w ogóle było go widać)
     Motyw ciemny przestawia TYLKO te dwa pokrętła (wartości „-dark" niżej).  */
  --shadow-rgb:      15 23 42;
  --shadow-k:        1;
  --shadow-rgb-dark: 0 0 0;
  --shadow-k-dark:   4;
  /* Pierścień fokusu — ten sam w każdym polu i przycisku systemu */
  --focus-ring: 0 0 0 3px var(--primary-ring);

  /* ── STANY ───────────────────────────────────────────────────────────────
     Nie dziedziczą koloru organizacji. Sukces ma być zielony także w firmie
     z zieloną marką — inaczej znaczenie znika.                             */
  --danger:     #dc2626;   --danger-bg:  #fef2f2;
  --success:    #16a34a;   --success-bg: #f0fdf4;
  --warning:    #d97706;   --warning-bg: #fffbeb;
  --info:       #0ea5e9;   --info-bg:    #f0f9ff;

  /* ── STATUSY ZGŁOSZEŃ ────────────────────────────────────────────────────
     NOWE. Dotąd ta mapa była zapisana DWA RAZY — w konto.php i w
     adminpanel-render.js — i zdążyła się rozjechać: wersja w panelu
     administratora nie zna statusu `on_hold`, więc wstrzymane zgłoszenie
     dostaje tam szarość zamiast właściwego koloru.
     Kolejność cyklu życia zgłoszenia:                                      */
  --status-new:        #3b82f6;   /* nowe                    */
  --status-accepted:   #8b5cf6;   /* przyjęte                */
  --status-progress:   #f59e0b;   /* w trakcie               */
  --status-hold:       #6b7280;   /* w trakcie — wstrzymane  */
  --status-pending:    #db2777;   /* oczekuje potwierdzenia  */
  --status-completed:  #10b981;   /* zakończone              */
  --status-cancelled:  #ef4444;   /* anulowane               */
  --status-unknown:    #9ca3af;   /* wartość awaryjna        */

  /* ── KOLORY APLIKACJI ────────────────────────────────────────────────────
     NOWE. Kafle w zakładce Aplikacje miały gradienty wpisane wprost
     w atrybucie style="" przy każdym kafelku, osobno w koncie i w panelu
     administratora. Para kolorów = początek i koniec gradientu 135°.       */
  --app-helpdesk-a:  #2563eb;  --app-helpdesk-b:  #1d4ed8;
  --app-knowledge-a: #f59e0b;  --app-knowledge-b: #d97706;
  --app-assets-a:    #7c3aed;  --app-assets-b:    #6d28d9;
  --app-rooms-a:     #0d9488;  --app-rooms-b:     #0f766e;
  --app-wifi-a:      #06b6d4;  --app-wifi-b:      #0891b2;
  --app-feedback-a:  #ec4899;  --app-feedback-b:  #8b5cf6;
  --app-points-a:    #f59e0b;  --app-points-b:    #eab308;
  --app-cloud-a:     #d9272e;  --app-cloud-b:     #b01e22;
  --app-transfer-a:  #0b84f5;  --app-transfer-b:  #0561cc;
  --app-radio-a:     #ef4444;  --app-radio-b:     #dc2626;
  --app-files-a:     #0ea5e9;  --app-files-b:     #0284c7;
  --app-vatroutes-a: #f97316;  --app-vatroutes-b: #ea580c;
  --app-pointsapp-a: #eab308;  --app-pointsapp-b: #ca8a04;
  /* Plakietka "nowosc" naklejana na rog kafla aplikacji. */
  --app-badge-a:     #f43f5e;  --app-badge-b:     #fb7185;

  /* ── PROMIEŃ ─────────────────────────────────────────────────────────── */
  --radius-xs:   4px;    /* NOWE: znaczniki, paski postępu   */
  --radius-6:    6px;    /* NOWE: małe przyciski, chipy      */
  --radius-sm:   8px;
  --radius-10:   10px;   /* NOWE: przyciski i pola w panelach */
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;   /* NOWE: modale, duże karty         */
  --radius-full: 999px;

  /* ── TYPOGRAFIA ──────────────────────────────────────────────────────── */
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --leading:   1.55;

  /* ── RUCH ────────────────────────────────────────────────────────────── */
  --ease: 0.2s ease;

  /* NOWE 25.09.2026 (audyt apple-design). Cztery czasy zamiast piętnastu.
     --dur-press   reakcja na naciśnięcie — ma być natychmiastowa
     --dur-fast    kolor, tło, obrys po najechaniu
     --dur-ui      pojawienie się elementu interfejsu (menu, modal, podpowiedź)
     --dur-sheet   duża powierzchnia (arkusz od dołu, panel boczny)
     Sprężyny to krzywe linear() policzone ze wzoru Apple (damping + response):
     --spring      damping 1.0 — bez przestrzelenia, domyślna dla wszystkiego
     --spring-flick damping 0.8 — lekkie odbicie, TYLKO po geście z pędem
     Czas trwania sprężyny = 1,35 × response (dla 0.8: 1,6 × response).     */
  --dur-press:  100ms;
  --dur-fast:   150ms;
  --dur-ui:     220ms;
  --dur-sheet:  340ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);   /* lustro --ease-out: wyjście tą samą drogą */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-flick: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── SKALA TEKSTU ────────────────────────────────────────────────────────
     NOWE 25.09.2026. Dotąd panel administratora miał 87 różnych rozmiarów
     tekstu (0.72rem, 0.75rem, 0.76rem, 0.78rem…). Nazwa = rozmiar w pikselach
     przy domyślnym 16 px, wartość w rem — tekst rośnie razem z ustawieniem
     rozmiaru czcionki w systemie.                                          */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  /* Odstęp liter zależy od rozmiaru: duży tekst ciaśniej, mały luźniej. */
  --tracking-display: -0.022em;  /* ≥ 24 px */
  --tracking-title:   -0.012em;  /* 17–22 px */
  --tracking-body:    0;
  --tracking-caps:    0.06em;    /* małe etykiety WERSALIKAMI */
  --leading-tight:    1.15;      /* nagłówki */
  --leading-snug:     1.35;      /* tytuły kart, listy */

  /* ── WARSTWY ─────────────────────────────────────────────────────────────
     Jedna skala na cały system. Nowe nakładki dopisywać TUTAJ, nie wpisywać
     z-index wprost — inaczej modal potrafi wylądować pod paskiem.          */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── CZAT ────────────────────────────────────────────────────────────── */
  --chat-mine-bg:  rgba(37, 99, 235, 0.13);
  --chat-other-bg: #ffffff;
  --chat-media-bg: #ffffff;
}

/* ── SKALA CIENI (elevation) — jedyne miejsce z wartościami cieni ────────
   Zadeklarowana na <body>, nie na :root: własności z var() liczą się tam,
   gdzie je zadeklarowano, więc tylko na <body> widzą przełącznik motywu
   (body.dark-mode, body:not(.light-mode) w @media). Wszystko w środku dziedziczy.

     --shadow-xs   włosowa: dymek czatu, chip, pole                 (blur ≤ 3)
     --shadow-sm   karta w spoczynku, kafel, wiersz                  (≤ 10)
     --shadow-md   karta uniesiona (hover), przycisk pływający       (≤ 20)
     --shadow-lg   menu, podpowiedź, toast, panel boczny             (≤ 40)
     --shadow-xl   modal, okno potwierdzenia, arkusz                 (> 40)
     --shadow-up   pasek przy DOLNEJ krawędzi (cień rzucany w górę)

   Zasada Apple: im większa powierzchnia, tym „grubsza" — wyżej w skali.
   Cień jest zawsze neutralny; kolor marki niesie wypełnienie, nie cień.   */
body {
  --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k)));
  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / calc(0.05 * var(--shadow-k))),
               0 2px 6px rgb(var(--shadow-rgb) / calc(0.05 * var(--shadow-k)));
  --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / calc(0.04 * var(--shadow-k))),
               0 8px 24px rgb(var(--shadow-rgb) / calc(0.08 * var(--shadow-k)));
  --shadow-lg: 0 8px 16px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k))),
               0 24px 56px rgb(var(--shadow-rgb) / calc(0.14 * var(--shadow-k)));
  --shadow-xl: 0 12px 24px rgb(var(--shadow-rgb) / calc(0.08 * var(--shadow-k))),
               0 32px 80px rgb(var(--shadow-rgb) / calc(0.22 * var(--shadow-k)));
  --shadow-up: 0 -1px 2px rgb(var(--shadow-rgb) / calc(0.04 * var(--shadow-k))),
               0 -6px 24px rgb(var(--shadow-rgb) / calc(0.06 * var(--shadow-k)));
}

/* Sprężyny jako linear() — Chrome 113+, Safari 17.2+, Firefox 112+.
   Starsze przeglądarki zostają przy --ease-out z :root (ta sama sylwetka
   bez odbicia), więc nic się nie psuje, tylko jest mniej „fizycznie".     */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.082, 0.243, 0.413, 0.562, 0.682, 0.774, 0.841, 0.89,
                     0.925, 0.949, 0.965, 0.977, 0.984, 0.99, 0.993, 0.995, 0.997, 1);
    --spring-flick: linear(0, 0.053, 0.175, 0.324, 0.473, 0.608, 0.722, 0.813,
                     0.883, 0.933, 0.968, 0.991, 1.005, 1.012, 1.015, 1.015, 1.014,
                     1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1.001, 1);
  }
}

/* ============================================================================
   TRYB CIEMNY
   ----------------------------------------------------------------------------
   Przełącznik dodaje klasę `dark-mode` na <body>. Selektor [data-theme="dark"]
   jest dołożony dla ekranów, które nie mają przełącznika motywu (logowanie,
   ekrany z maili) — żeby dało się je objąć bez dokładania im JavaScriptu.
   ========================================================================= */

body.dark-mode,
[data-theme="dark"] {
  --bg:        #121212;
  --card:      #1e1e1e;
  --surface-2: #252525;
  --field-bg:  #2a2a2a;

  --text:      #e0e0e0;
  --muted:     #9aa0a6;
  --text-2:    #9aa0a6;
  --text-3:    #6f7680;
  /* --text-inv CELOWO bez nadpisania: to tekst na tle koloru marki, a marka
     zostaje nasycona także w trybie ciemnym — biel jest tu nadal poprawna.
     Tak samo zachowuje się dotychczasowy style.css. */

  --border:        #333333;
  --border-soft:   #2a2a2a;
  --border-strong: #454545;

  --shadow-rgb: var(--shadow-rgb-dark);
  --shadow-k:   var(--shadow-k-dark);

  --danger-bg:  #2a1313;
  --success-bg: #192a16;
  --warning-bg: #2a2306;
  --info-bg:    #0f1f38;

  --chat-mine-bg:  #1a3a26;
  --chat-other-bg: #1e1e1e;
  --chat-media-bg: #252525;
}