/* =============================================================================
   KWHotel Light — motyw (ADR-020, docs/08)

   JEDYNE miejsce w repozytorium z wartościami kolorów. Komponent pyta
   o var(--kwl-*), nigdy o #rrggbb — pilnuje tego reguła A12 w CI.

   Brakującego tokenu NIE dopisuje się lokalnie w komponencie. Dokłada się go
   tutaj i do docs/08 §4, w tym samym commicie. Inaczej dokument i kod rozjadą
   się w tygodniu.

   Nazwy są SEMANTYCZNE, nie kolorystyczne: --kwl-danger, nigdy --kwl-red-600.
   Dzięki temu zmiana odcienia jest zmianą w jednym pliku, a nie w stu
   komponentach — i to jest jedyny powód, dla którego ten plik istnieje.
   ========================================================================== */

/* --- Kroje -------------------------------------------------------------------
   Osadzone, nigdy z CDN-u: aplikacja mobilna działa offline (ADR-002), a panel
   webowy nie ma powodu zależeć od zewnętrznego hosta przy każdym logowaniu.

   Oba kroje muszą mieć latin extended i GREKĘ — „el" jest jednym z języków
   konta, a bez greki napisy wypadają w kroju zastępczym (docs/08 §7.2).

   font-display: swap — tekst pojawia się natychmiast w kroju zastępczym.
   Przy pierwszym uruchomieniu aplikacji lepszy jest napis w innym kroju
   niż pusty ekran.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Commissioner";
    src: url("fonts/Commissioner-Variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
   Wariant JASNY — wartości domyślne
   ========================================================================== */

:root {
    /* --- Powierzchnie ---
       Czysta czerń jest zabroniona jako tło także w ciemnym wariancie: przy
       przewijaniu grafiku na OLED daje smużenie, a różnica powierzchni
       przestaje być widoczna. */
    --kwl-bg: #F6F8F7;
    --kwl-surface: #FFFFFF;
    --kwl-surface-raised: #FFFFFF;
    --kwl-surface-sunken: #EDF1EF;
    --kwl-border: #D6E0DB;

    /* --- Tekst --- */
    --kwl-text: #16262B;
    --kwl-text-muted: #3D5259;
    --kwl-text-faint: #5E727A;

    /* --- Marka --- */
    --kwl-primary: #14706B;
    --kwl-primary-hover: #1E837B;
    --kwl-primary-on: #FFFFFF;
    --kwl-primary-subtle: #EEF6F4;

    /* --- Akcent ---
       Bursztyn łączy Light z Pro. Turkus mówi „to jest Light", bursztyn mówi
       „to jest KWHotel".

       NIGDY jako kolor zwykłego tekstu na jasnym tle — kontrast 2,05:1.
       Służy jako wypełnienie, obrys i akcent; tekst NA bursztynie jest
       atramentowy (--kwl-accent-on, 7,13:1). */
    --kwl-accent: #E8A13D;
    --kwl-accent-on: #16262B;
    --kwl-focus: #E8A13D;

    /* --- Komunikaty --- */
    --kwl-success: #1E7A4B;
    --kwl-warning: #C77F1A;
    --kwl-danger: #B3261E;
    --kwl-info: #2A4E8F;

    /* --- Statusy rezerwacji ---
       KOLOR NIGDY NIE JEST JEDYNYM NOŚNIKIEM. Około 8% mężczyzn nie rozróżnia
       czerwieni i zieleni, a to jest dokładnie demografia właściciela małego
       obiektu — przy deuteranopii pasek konfliktu i pasek potwierdzonej
       rezerwacji SĄ TYM SAMYM KOLOREM.

       Każdy status ma drugi nośnik (obrys, wypełnienie, ikona, przekreślenie),
       a testem przed wydaniem jest zrzut grafiku w skali szarości. */
    --kwl-res-tentative: #C77F1A;
    --kwl-res-confirmed: #14706B;
    --kwl-res-checkedin: #2A4E8F;
    --kwl-res-closed: #5A6B72;
    --kwl-res-noshow: #7A3E6E;
    --kwl-res-conflict: #B3261E;

    /* --- Kształt i przestrzeń (docs/08 §8) --- */
    --kwl-radius-sm: 8px;
    --kwl-radius-md: 12px;
    --kwl-radius-lg: 16px;

    /* Siatka 4 px. Wszystkie odstępy są jej wielokrotnością. */
    --kwl-space-1: 4px;
    --kwl-space-2: 8px;
    --kwl-space-3: 12px;
    --kwl-space-4: 16px;
    --kwl-space-5: 20px;
    --kwl-space-6: 24px;
    --kwl-space-7: 32px;
    --kwl-space-8: 40px;

    /* Minimalny cel dotykowy. Dotyczy też uchwytów do przeciągania paska
       rezerwacji — to one decydują, czy da się trafić palcem. */
    --kwl-touch: 48px;

    /* --- Elewacja ---
       W ciemnym wariancie cienia nie widać, więc tam elewację robi jaśniejsza
       powierzchnia i mocniejszy obrys (docs/08 §5). */
    --kwl-shadow-1: 0 1px 2px rgba(22, 38, 43, .08), 0 1px 3px rgba(22, 38, 43, .06);
    --kwl-shadow-2: 0 8px 24px -6px rgba(22, 38, 43, .18);

    /* --- Typografia --- */
    --kwl-font-sans: "Commissioner", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --kwl-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* =============================================================================
   Wariant CIEMNY

   NIE JEST ODWRÓCENIEM JASNEGO. Ma własne wartości; filter: invert jest
   zabroniony (ADR-020) — psuje zdjęcia, skany dokumentów i znak.

   Kolory statusów są jaśniejsze i MNIEJ NASYCONE niż w jasnym: nasycony kolor
   na ciemnym tle wibruje przy przewijaniu grafiku.
   ========================================================================== */

/* Motyw systemowy. Warunek :not([data-theme="light"]) sprawia, że jawny wybór
   jasnego wygrywa z ciemnym ustawieniem systemu — bez niego użytkownik, który
   świadomie wybrał jasny, i tak dostaje ciemny. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kwl-bg: #0E1518;
        --kwl-surface: #162126;
        --kwl-surface-raised: #1E2C32;
        --kwl-surface-sunken: #111A1E;
        --kwl-border: #2B3C43;

        --kwl-text: #E6EDEA;
        --kwl-text-muted: #9FB3B0;
        --kwl-text-faint: #7A8F91;

        --kwl-primary: #4FC0B3;
        --kwl-primary-hover: #3F9E94;
        --kwl-primary-on: #0E1518;
        --kwl-primary-subtle: #12312F;

        --kwl-accent: #F0B457;
        --kwl-accent-on: #16262B;
        --kwl-focus: #F0B457;

        --kwl-success: #4FC98A;
        --kwl-warning: #F0B457;
        --kwl-danger: #F2857A;
        --kwl-info: #7FA9E8;

        --kwl-res-tentative: #F0B457;
        --kwl-res-confirmed: #4FC0B3;
        --kwl-res-checkedin: #7FA9E8;
        --kwl-res-closed: #9AAFB4;
        --kwl-res-noshow: #C08BB4;
        --kwl-res-conflict: #F2857A;

        --kwl-shadow-1: none;
        --kwl-shadow-2: none;
    }
}

/* Jawny wybór ciemnego. Powtórzenie wartości jest tu nieuniknione: reguła
   z @media i reguła z atrybutu to dwa różne selektory, a CSS nie ma sposobu,
   żeby jeden odwołał się do drugiego bez preprocesora. */
:root[data-theme="dark"] {
    --kwl-bg: #0E1518;
    --kwl-surface: #162126;
    --kwl-surface-raised: #1E2C32;
    --kwl-surface-sunken: #111A1E;
    --kwl-border: #2B3C43;

    --kwl-text: #E6EDEA;
    --kwl-text-muted: #9FB3B0;
    --kwl-text-faint: #7A8F91;

    --kwl-primary: #4FC0B3;
    --kwl-primary-hover: #3F9E94;
    --kwl-primary-on: #0E1518;
    --kwl-primary-subtle: #12312F;

    --kwl-accent: #F0B457;
    --kwl-accent-on: #16262B;
    --kwl-focus: #F0B457;

    --kwl-success: #4FC98A;
    --kwl-warning: #F0B457;
    --kwl-danger: #F2857A;
    --kwl-info: #7FA9E8;

    --kwl-res-tentative: #F0B457;
    --kwl-res-confirmed: #4FC0B3;
    --kwl-res-checkedin: #7FA9E8;
    --kwl-res-closed: #9AAFB4;
    --kwl-res-noshow: #C08BB4;
    --kwl-res-conflict: #F2857A;

    --kwl-shadow-1: none;
    --kwl-shadow-2: none;
}

/* =============================================================================
   Podstawa
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background: var(--kwl-bg);
    color: var(--kwl-text);
    font-family: var(--kwl-font-sans);

    /* 16 px to minimum na mobile — poniżej tej wartości iOS przybliża widok
       przy wejściu w pole formularza (docs/08 §7.3). */
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* --- Skala typograficzna (docs/08 §7.3) --- */

h1, .kwl-h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; }
h2, .kwl-h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; }

.kwl-text-muted { color: var(--kwl-text-muted); }
.kwl-text-faint { color: var(--kwl-text-faint); }
.kwl-small { font-size: 14px; line-height: 20px; }

.kwl-label {
    font-family: var(--kwl-font-mono);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Liczby stojące w kolumnie MUSZĄ mieć stałą szerokość cyfry — bez tego
   kolumna dat drga przy każdym przewinięciu grafiku (docs/08 §7.2). */
.kwl-num,
td.kwl-num,
.kwl-schedule time {
    font-family: var(--kwl-font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Formularze --- */

input, select, textarea, button {
    font-family: inherit;
    font-size: 16px;
}

input, select, textarea {
    min-height: var(--kwl-touch);
    padding: 0 var(--kwl-space-3);
    background: var(--kwl-surface);
    color: var(--kwl-text);
    border: 1px solid var(--kwl-border);
    border-radius: var(--kwl-radius-sm);
}

button {
    min-height: var(--kwl-touch);
    padding: 0 var(--kwl-space-4);
    border: 0;
    border-radius: var(--kwl-radius-md);
    background: var(--kwl-primary);
    color: var(--kwl-primary-on);
    font-weight: 600;
    cursor: pointer;
}

button:hover { background: var(--kwl-primary-hover); }

a { color: var(--kwl-primary); }

/* --- Fokus ---
   Widoczny na KAŻDYM elemencie interaktywnym. Nigdy outline: none bez
   zamiennika — dla klawiatury to jedyna informacja o tym, gdzie się jest. */
:focus-visible {
    outline: 3px solid var(--kwl-focus);
    outline-offset: 2px;
}

/* --- Ruch ---
   Wyłącza animacje przejść i przewijania grafiku u osób, które o to poprosiły
   w ustawieniach systemu (docs/08 §10). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Tekst wyłącznie dla czytnika ekranu ---
   Kolor i kształt są dla oka; tu musi paść słowo. Klasa jest globalna, bo używa jej
   każdy komponent pokazujący status — scoped CSS jednego z nich nie zadziałałby
   w pozostałych. */
.kwl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Zdjęcia i dokumenty ---
   Nie są przyciemniane w ciemnym motywie. Skan dowodu ma wyglądać jak skan
   dowodu (docs/08 §5). */
img, .kwl-document {
    color-scheme: light;
}

/* --- Papier ---
   TRZECI WARIANT PALETY, obok jasnego i ciemnego, i istnieje z tego samego powodu
   co one: nośnikiem jest tu inne urządzenie. Raport ze statystyk i lista sprzątań
   są jedynymi rzeczami w tym produkcie, które ktoś realnie niesie na kartce —
   pokojówka chodzi z listą po pokojach.

   Ciemny motyw na papierze to zużyty toner i tekst nieczytelny na wydruku
   czarno-białym. Przeglądarka domyślnie nie drukuje TŁA, ale kolor tekstu owszem —
   więc jasnoszary napis z ciemnego motywu wyszedłby jasnoszary na białym papierze.

   Nadpisujemy WYŁĄCZNIE tokeny, tak samo jak w wariancie ciemnym. Dzięki temu żaden
   arkusz komponentu nie potrzebuje własnej reguły `@media print` z wartością koloru —
   a reguła A12 (docs/08 §11) zostaje cała. */
@media print {
    :root {
        --kwl-bg: #FFFFFF;
        --kwl-surface: #FFFFFF;
        --kwl-surface-raised: #FFFFFF;
        --kwl-surface-sunken: #FFFFFF;
        --kwl-text: #000000;
        --kwl-text-muted: #333333;
        --kwl-text-faint: #555555;
        --kwl-border: #999999;
    }
}