/* Wartosci calego interfejsu. Ten plik niczego nie styluje.

   Zasada: arkusze komponentow nie zapisuja kolorow, odstepow ani promieni
   z reki - siegaja tylko po `var(--...)` stad. Stary front mial ten sam
   odcien tla wpisany w 36 miejscach w 20 plikach; tutaj kazda taka wartosc
   ma jedno zrodlo.

   Motyw jest ciemny i jest to decyzja, a nie brak jasnego: znak firmowy to
   ciemny monogram na czerni, a aplikacja stoi w pracowni obok frezarki,
   gdzie jasny ekran meczy. Ukladu tokenow nie trzeba by jednak ruszac, gdyby
   jasny motyw kiedys doszedl - wystarczy jeden blok `[data-theme="light"]`
   nadpisujacy sekcje "kolory".
*/

@layer tokens {
    :root {
        color-scheme: dark;

        /* ---------------------------------------------------------------
           KOLORY - powierzchnie
           Szesc powierzchni. Im wyzej element "lezy", tym jasniej:
           plotno < karta < okno < kafelek < menu. `sunken` idzie w druga
           strone - naglowki tabel, tla pol - zeby wglebienie bylo
           rozpoznawalne bez ramki.

           Szara neutralna, bez zadnego zafarbu, i kazdy stopien zapisany
           wprost - nie kryciem.

           Probowalem tu szkla (`#ffffff1c` na karcie, tak jak na `main`
           i `ui_redesign`), zeby monogram z `04-layout` przechodzil przez
           strone. Szklo robi jednak dwie rzeczy naraz: przepuszcza znak
           i przepuszcza plotno. Karta nad jasna czescia monogramu wychodzila
           `#353535`, obok niego `#252525`, a kafelek na niej jeszcze jasniej
           - wiec ten sam napis mial na jednym koncu rzedu inny kontrast niz
           na drugim i tresc zlewala sie z tlem. Panel administratora, gesty
           od kafli frezarek, pokazywal to najlepiej.

           Znak wodny nie stracil na tym nic waznego: plotna jest na kazdej
           stronie duzo - marginesy, pas nad trescia, tlo pod menu - i to
           tam monogram ma byc widoczny. Nie musi przebijac przez dane.

           Kazda ma swoja robote:
           `canvas`   plotno, jedyne miejsce ze znakiem wodnym;
           `sunken`   wglebienie w karcie - naglowek tabeli, tlo pola;
           `surface`  karta i panel;
           `window`   okno modalne. Osobne od karty, bo lezy nad zaslona
                      i nad nim otwieraja sie jeszcze menu;
           `raised`   kafelek, przycisk, wiersz w oknie;
           `overlay`  menu, podpowiedz, komunikat - to, co lezy najwyzej.

           Kolejnosc `window` < `raised` < `overlay` nie jest przypadkiem:
           lista rozwijana otwarta w oknie "Zapisz serwis" musi miec czym
           odciac sie od panelu, na ktorym stoi.
        --------------------------------------------------------------- */
        --canvas: #0a0a0a;
        --surface-sunken: #121212;
        --surface: #1e1e1e;
        --surface-window: #212121;
        --surface-raised: #272727;
        --surface-overlay: #333333;
        --surface-hover: #ffffff14;
        --surface-active: #ffffff1f;

        /* ---------------------------------------------------------------
           KOLORY - tresc
           Trzy stopnie wazosci. `faint` jest jeszcze czytelny, wiec wolno
           nim pisac podpisy pol i drobne dane kafelka, ale nie tresc.

           Kontrast jest teraz staly na calej stronie - powierzchnie sa
           kryjace, wiec nie zalezy od tego, czy pod spodem wypada monogram.
           Najciemniejsze tlo, na jakim staja te kolory, to karta `#1e1e1e`,
           najjasniejsze - kafelek pod kursorem `#383838`:

                        na karcie      na kafelku pod kursorem
             text         16.7:1                 11.7:1
             muted         9.7:1                  6.8:1
             faint         6.8:1                  4.8:1

           `faint` jest jasniejszy od `#909090` z paska gornego starego
           frontu, bo tam lezal na czerni, a tu na karcie i na kafelku.
           `#909090` przechodzi na karcie (5.2:1), ale na kafelku pod
           kursorem spada do 3.2:1.
        --------------------------------------------------------------- */
        --text: #ffffff;
        --text-muted: #c5c5c5;
        --text-faint: #a5a5a5;
        --text-on-accent: #ffffff;

        /* ---------------------------------------------------------------
           KOLORY - linie
           `hairline` to podzial wewnatrz karty, `border` obrys elementu,
           `border-strong` rzeczy, ktore maja sie odcinac (pola formularza).

           Wszystkie trzy sa biela o niskim kryciu, a nie osobnym szarym
           odcieniem - tak jak wczesniej (`rgba(255,255,255,0.12)` na kafelku,
           `0.18` na przycisku, `0.28` po najechaniu). Dzieki temu ta sama
           kreska trzyma sie i na plotnie, i na karcie, i w oknie.
        --------------------------------------------------------------- */
        --hairline: #ffffff1f;
        --border: #ffffff2e;
        --border-strong: #ffffff47;

        /* ---------------------------------------------------------------
           KOLORY - akcent
           Czerwien firmowa `#cc0000` - ta sama, ktora na starym froncie
           podkreslala tytul strony powitalnej i naglowek parku frezarek,
           i ta sama, z ktorej byl gradient kafelka na pulpicie
           (`#cc0000` -> `#990000`). To jedyny nasycony kolor, jaki interfejs
           niesie sam z siebie; reszta chromu jest szara.

           Trzy wartosci, bo czerwien na czerni nie da rady byc naraz
           wypelnieniem i pismem:
           `--accent`        wypelnia (przycisk glowny, obrys fokusu,
                             kreska przy pozycji menu) - napis na niej jest
                             bialy, 5.9:1;
           `--accent-strong` to samo wypelnienie po najechaniu. Ciemnieje,
                             a nie jasnieje - tak samo robil przycisk
                             kasujacy (`#c00` -> `#861b1b`);
           `--accent-soft`   czerwien jako pismo na ciemnym tle (odsylacz,
                             wlaczona zakladka, wyroznione liczby). Sama
                             `#cc0000` ma tu 2.9:1, ten rozjasniony wariant
                             - 10:1.

           `--accent-quiet` to poswiata czerwieni pod trescia. Nie stoi pod
           wybrana pozycja menu ani pod wlaczonym przelacznikiem - te biora
           biale szklo `--surface-active`, tak jak na starym froncie, bo
           bordowy pas przez cala szerokosc pozycji czytal sie jak
           ostrzezenie, a nie jak "tu jestes". Zostaje tam, gdzie czerwien
           jest tresciowa: zaznaczenie tekstu i numer kroku kalibracji.
        --------------------------------------------------------------- */
        --accent: #cc0000;
        --accent-strong: #990000;
        --accent-soft: #ffb4b4;
        --accent-quiet: #cc00001c;
        --accent-line: #cc000066;
        --accent-ring: #cc00004d;

        /* ---------------------------------------------------------------
           KOLORY - stany
           Dokladnie te cztery znaczenia, ktorych uzywa dziedzina: kalibracja
           aktualna, zbliza sie termin, po terminie, informacja.

           Bursztyn i czerwien sa wziete co do wartosci ze starego frontu,
           gdzie znaczyly juz dokladnie to samo: `#ffb521` to znak
           ostrzegawczy i kropka "wkrotce termin" w parku frezarek, a
           `#fc3c3c` konczy pasek zuzycia cyklu i jest kropka "po terminie".
           Blekit `#7dd3fc` rysuje serie danych w statystykach - stad
           informacja mowi tym samym kolorem, co wykres pod nia. Zielen jest
           pochodna limonki z komunikatu o powodzeniu, sciemniona na tyle,
           zeby dalo sie nia pisac.

           Czerwien stanu jest jasniejsza od firmowej i to nie przypadek:
           `--accent` znaczy "tedy dalej", `--danger` - "po terminie". Pod
           naglowkiem strony ta druga czytalaby sie jak ostrzezenie.
        --------------------------------------------------------------- */
        --ok: #8ade3d;
        --ok-quiet: #8ade3d1f;
        --ok-line: #8ade3d59;

        --warn: #ffb521;
        --warn-quiet: #ffb5211f;
        --warn-line: #ffb52159;

        --danger: #fc3c3c;
        --danger-quiet: #fc3c3c1f;
        --danger-line: #fc3c3c59;
        --danger-solid: #891b1b;
        --danger-solid-hover: #6b1414;

        --info: #7dd3fc;
        --info-quiet: #7dd3fc1f;
        --info-line: #7dd3fc59;

        /* ---------------------------------------------------------------
           ODSTEPY
           Skala co pol kroku u dolu, potem podwojenia. Wszystkie odstepy
           w komponentach biora sie stad - dzieki temu rytm pionowy jest
           ten sam na kazdej stronie.
        --------------------------------------------------------------- */
        --space-3xs: 0.125rem;
        --space-2xs: 0.25rem;
        --space-xs: 0.5rem;
        --space-sm: 0.75rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
        --space-3xl: 4rem;

        /* ---------------------------------------------------------------
           PROMIENIE
        --------------------------------------------------------------- */
        --radius-xs: 4px;
        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 14px;
        --radius-pill: 999px;

        /* ---------------------------------------------------------------
           PISMO
           Ubuntu zostaje - to krój marki, wchodzi juz z Google Fonts.
           Do tego krój o stalej szerokosci: aplikacja jest pelna numerow
           seryjnych, PLC i wspolrzednych, a te czyta sie i porownuje
           kolumnami tylko wtedy, gdy cyfry stoja w rowniutkich slupkach.
        --------------------------------------------------------------- */
        --font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

        --text-2xs: 0.6875rem;
        --text-xs: 0.75rem;
        --text-sm: 0.8125rem;
        --text-md: 0.9375rem;
        --text-lg: 1.0625rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;

        --weight-normal: 400;
        --weight-medium: 500;
        --weight-bold: 700;

        --leading-tight: 1.25;
        --leading-normal: 1.55;
        --leading-relaxed: 1.75;

        /* Podpisy pol i naglowki tabel - jeden zestaw, zeby nie rozjezdzaly
           sie miedzy kartami a tabelami. */
        --label-size: var(--text-2xs);
        --label-spacing: 0.06em;
        --label-transform: uppercase;

        /* ---------------------------------------------------------------
           CIENIE
           Na ciemnym tle cien buduje wyniesienie slabiej niz jasnosc tla,
           wiec sa dyskretne - od tego, co unosi element, jest `--surface-*`.
        --------------------------------------------------------------- */
        --shadow-sm: 0 1px 2px #00000059;
        --shadow-md: 0 6px 16px #0000006b;
        --shadow-lg: 0 20px 48px #00000080;

        /* ---------------------------------------------------------------
           STEROWANIA
           Jedna wysokosc dla przyciskow, pol i selectow - inaczej rzad
           "pole + przycisk" nigdy nie stoi rowno.
        --------------------------------------------------------------- */
        --control-height: 2.25rem;
        --control-height-sm: 1.75rem;
        --control-pad-x: 0.75rem;

        /* ---------------------------------------------------------------
           SZKIELET STRONY
        --------------------------------------------------------------- */
        --app-bar-height: 3.5rem;
        /* Menu glowne przy lewej krawedzi. `--side-menu-width` to co innego:
           lista sekcji wewnatrz strony (frezarka, profil, "Moja firma"). */
        --nav-width: 16.5rem;
        --side-menu-width: 14rem;
        --content-max: 90rem;
        --content-pad: clamp(var(--space-md), 2.5vw, var(--space-xl));
        --card-pad: clamp(var(--space-sm), 1.6vw, var(--space-lg));

        /* ---------------------------------------------------------------
           WARSTWY Z
           Skala zamiast liczb z powietrza - stary arkusz mial m.in. 1003
           i 2147483647.
        --------------------------------------------------------------- */
        --z-raised: 10;
        --z-sticky: 100;
        --z-dropdown: 300;
        --z-overlay: 900;
        --z-modal: 1000;
        --z-toast: 1100;
        --z-blocker: 2000;

        /* ---------------------------------------------------------------
           RUCH
        --------------------------------------------------------------- */
        --dur-fast: 120ms;
        --dur-med: 200ms;
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* ===================================================================
       TELEFON I TABLET
       Dwa nadpisania tej samej tabeli wartosci - nic ponizej nie jest
       osobnym "mobilnym" wygladem, tylko ta sama aplikacja z inaczej
       dobranymi liczbami. Dzieki temu komponenty nie musza wiedziec, na
       czym stoja: pisza `var(--control-height)` jak dotad, a o wartosci
       decyduje urzadzenie.

       Sa to dwa rozne pytania i dlatego dwa rozne bloki:

         `pointer: coarse`  czym uzytkownik celuje. Palec ma inna
                            dokladnosc niz kursor, wiec rosna cele
                            klikniecia - niezaleznie od tego, czy jest to
                            telefon, czy tablet trzymany w poziomie;
         `max-width: 48rem` ile jest miejsca. Pismo moze urosnac, bo na
                            waskim ekranie nie ma z czym konkurowac
                            o szerokosc.

       Komputer nie wchodzi w zaden z nich: `pointer` pyta o urzadzenie
       glowne, wiec laptop z ekranem dotykowym i mysza zostaje `fine`.
    =================================================================== */

    /* --- palec zamiast kursora ------------------------------------------
       2.25rem to 36 px - tyle, ile trzeba oku, i za malo dla palca. Apple
       podaje w wytycznych 44 px, Material 48; bierzemy mniejsza z nich, bo
       formularze sa tu dlugie - rejestracja firmy to kilkanascie pol jedno
       pod drugim - i kazde cztery piksele mnoza sie przez cala ich wysokosc.

       Mniejsza kontrolka (przycisk w komorce tabeli, w kafelku frezarki)
       nie idzie do 44: w rzedzie z trzema akcjami zajelaby cala szerokosc
       wiersza. 36 px jest kompromisem - wyraznie latwiejszym celem niz
       dotychczasowe 28, a nadal miesci sie w kafelku. */
    @media (pointer: coarse) {
        :root {
            --control-height: 2.75rem;
            --control-height-sm: 2.25rem;
        }
    }

    /* --- waski ekran ----------------------------------------------------
       Skala pisma jest na komputerze celowo gesta - strona niesie po
       kilkanascie pol naraz i musi zmiescic je w kolumnach. Na telefonie
       kolumna jest jedna, wiec ta gestosc niczego nie kupuje, a kosztuje
       czytelnosc: 11 px podpisu pola i 13 px komorki tabeli czyta sie
       z trudem w warsztacie, przy frezarce, pod nierownym swiatlem.

       Dol skali idzie wiec w gore, a gora - w dol: `--text-3xl` to na
       komputerze 30 px nad tytulem strony, a na szerokosci 375 px taki
       tytul lamie sie na trzy wiersze i spycha tresc pod krawedz ekranu.

       `--text-md` konczy na 16 px nie tylko dla oka. Ponizej 16 px Safari
       na iPhonie sam powieksza strone przy wejsciu w pole tekstowe i juz
       jej nie zmniejsza - a pola dziedzicza rozmiar pisma po `body`
       (`02-reset`). Reszte, czyli pola pisane mniejsza skala, domyka
       regula przy polach formularza w `03-base`.

       Podpisy pol (`--label-size`) i naglowki tabel ida za `--text-2xs`
       same z siebie, bo sa z niego wyliczone. */
    @media (max-width: 48rem) {
        :root {
            --text-2xs: 0.75rem;
            --text-xs: 0.8125rem;
            --text-sm: 0.875rem;
            --text-md: 1rem;
            --text-xl: 1.1875rem;
            --text-2xl: 1.375rem;
            --text-3xl: 1.625rem;

            /* Karta zajmuje na telefonie cala szerokosc ekranu, wiec jej
               wypelnienie liczy sie juz nie z szerokosci okna, tylko
               wprost: przy `clamp(.., 1.6vw, ..)` na 375 px wychodzilo
               z tego 12 px i tresc kleila sie do ramki. */
            --card-pad: var(--space-md);
        }
    }
}