/* =========================================================================
   DARTOM CRM - warstwa motywu (Material Design 3 na tokenach Twenty)
   =========================================================================

   CO TO JEST: nadpisanie zmiennych CSS `--t-*`, z ktorych Twenty wyprowadza
   caly wyglad. Nie ruszamy ani jednego pliku z bundla - tylko podstawiamy
   inne wartosci pod te same nazwy. Wycofanie = usuniecie <link> z index.html.

   DLACZEGO `.light.light`, a nie `.light`: bundle deklaruje tokeny trzy razy
   (blok bazowy, blok `@supports (color: display-p3)` i blok
   `@supports (corner-shape: squircle)`), a Vite dokleja arkusze leniwych
   chunkow na KONIEC <head> - juz po nas. Przy rownej specyficznosci wygrywa
   to, co pozniej w kodzie, wiec przegralibysmy z blokiem P3. Podwojona klasa
   daje specyficznosc 0,2,0 i wygrywa niezaleznie od kolejnosci. Z tego samego
   powodu nie ma tu ani jednego selektora z hashem Linarii/CSS-modules
   (`.s1wc667`, `._button_1kfus_11`) - te zmieniaja sie przy kazdym buildzie
   Twenty. Trzymamy sie nazw tokenow i atrybutow `data-*`.

   Skala 1-12 w ukladzie Radix (tak samo jak oryginal): 1-2 tla aplikacji,
   3-5 tla komponentow, 6-8 obramowania, 9 kolor marki, 10 hover/pressed,
   11 tekst na jasnym tle, 12 tekst o najwyzszym kontrascie.
   Wyliczona w OKLab z #0c6a3d (zielen z ikony aplikacji) - `rampa.py`.
   Kontrasty: bialy tekst na #0c6a3d = 6,68:1, krok 11 na bialym = 7,42:1.
   ========================================================================= */

/* --- Kroj pisma: Roboto (Apache-2.0), hostowany u nas -------------------- */
/* Zakresy unicode przepisane z @font-face Intera w bundlu Twenty, zeby
   polskie znaki (latin-ext) nie wypadly na zastepczy kroj. */

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/roboto-latin-400-normal.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/roboto-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/roboto-latin-500-normal.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/roboto-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/roboto-latin-700-normal.woff2) format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/roboto-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Wspolne dla obu motywow -------------------------------------------- */

.light.light,
.dark.dark {
  --t-font-family: Roboto, Inter, -apple-system, "Segoe UI", sans-serif;

  /* Skala ksztaltu Material 3: extra-small 4, small 8, medium 12, large 16,
     extra-large 28. Twenty mial 2/4/8/16/20 - Material jest wyrazniej
     zaokraglony i to jest polowa efektu "nowoczesnosci". */
  --t-border-radius-xs: 4px;
  --t-border-radius-sm: 8px;
  --t-border-radius-sm-round: 8px;
  --t-border-radius-md: 12px;
  --t-border-radius-md-round: 12px;
  --t-border-radius-lg: 16px;
  --t-border-radius-xl: 28px;
  --t-border-radius-xxl: 40px;

  /* Przejscia odrobine dluzsze niz w Twenty - Material prowadzi wzrok ruchem.
     UWAGA: te tokeny sa BEZ JEDNOSTKI - CSS mnozy je przez 1s
     (`calc(var(--t-animation-duration-fast) * 1s)`). Wpisanie "0.2s" da
     `calc(0.2s * 1s)`, czyli wartosc nieprawidlowa, i przejscia po cichu
     przestana dzialac. `--t-animation-duration-slow` (1,5) zostawiamy. */
  --t-animation-duration-instant: 0.1;
  --t-animation-duration-fast: 0.2;
  --t-animation-duration-normal: 0.35;
}

/* Przegladarki z obsluga `corner-shape` dostaja squircle - Twenty podwaja tam
   promienie, bo squircle o tym samym promieniu wyglada na mniej zaokraglony.
   Trzymamy te sama proporcje 2x, inaczej rogi zrobilyby sie za ostre. */
@supports (corner-shape: squircle) {
  .light.light,
  .dark.dark {
    --t-border-radius-xs: 8px;
    --t-border-radius-sm: 16px;
    --t-border-radius-sm-round: 16px;
    --t-border-radius-md: 24px;
    --t-border-radius-md-round: 24px;
    --t-border-radius-lg: 32px;
    --t-border-radius-xl: 56px;
    --t-border-radius-xxl: 80px;
  }
}

/* --- Motyw jasny -------------------------------------------------------- */

.light.light {
  /* Zielen DARTOM w miejsce indygo. Twenty prowadzi WSZYSTKIE akcenty
     (przyciski `data-accent=blue`, obwodki fokusu, zaznaczenie wiersza,
     odnosniki) przez te jedna skale, wiec to jedno podstawienie przemalowuje
     aplikacje. `--t-color-green*` zostaje nietkniete - to kolor semantyczny
     (sukces) i musi dalej znaczyc co innego niz marka. */
  --t-color-blue: #0c6a3d;
  --t-color-blue1: #f7fffa;
  --t-color-blue2: #ecfdf1;
  --t-color-blue3: #dcf9e5;
  --t-color-blue4: #ccf3d8;
  --t-color-blue5: #baebca;
  --t-color-blue6: #a8e1bb;
  --t-color-blue7: #92d3a9;
  --t-color-blue8: #75be90;
  --t-color-blue9: #0c6a3d;
  --t-color-blue10: #00592e;
  --t-color-blue11: #0b6338;
  --t-color-blue12: #003317;

  /* Tokeny `--t-accent-*` sa w oryginale kopia skali niebieskiej - trzymamy
     ten sam uklad, zeby komponenty, ktore siegaja po akcent zamiast po skale,
     zmienily sie razem z reszta. */
  --t-accent-primary: #baebca;
  --t-accent-secondary: #baebca;
  --t-accent-tertiary: #dcf9e5;
  --t-accent-quaternary: #ecfdf1;
  --t-accent-accent1: #f7fffa;
  --t-accent-accent2: #ecfdf1;
  --t-accent-accent3: #dcf9e5;
  --t-accent-accent4: #ccf3d8;
  --t-accent-accent5: #baebca;
  --t-accent-accent6: #a8e1bb;
  --t-accent-accent7: #92d3a9;
  --t-accent-accent8: #75be90;
  --t-accent-accent9: #0c6a3d;
  --t-accent-accent10: #00592e;
  --t-accent-accent11: #0b6338;
  --t-accent-accent12: #003317;
  --t-accent-accent3570: #75be90;
  --t-accent-accent4060: #75be90;
  --t-buttons-secondary-text-color: #75be90;
  --t-border-color-blue: #92d3a9;

  /* Powierzchnie Material 3: neutralne z ledwie wyczuwalnym podbarwieniem
     kolorem marki, zamiast czystych szarosci. Kolejnosc jasnosci zostaje
     taka jak w oryginale (primary najjasniejsze), wiec nic sie nie odwraca. */
  --t-background-primary: #fbfdfb;
  --t-background-secondary: #f5f9f5;
  --t-background-tertiary: #eef3ef;
  --t-background-quaternary: #e5ebe6;

  --t-border-color-light: #e8eee9;
  --t-border-color-medium: #dfe6e0;
  --t-border-color-strong: #c8d2ca;

  --t-font-color-primary: #1f2320;
  --t-font-color-secondary: #545c56;
  --t-font-color-tertiary: #7c857e;
  --t-font-color-light: #a8b0aa;
  --t-font-color-extra-light: #c6ccc7;

  /* Warstwa stanu (hover/pressed) w Material bierze kolor z barwy wiodacej,
     nie z czerni - stad zielonkawy odcien podswietlen wierszy i przyciskow. */
  --t-background-transparent-light: #0c6a3d0f;
  --t-background-transparent-lighter: #0c6a3d08;
  --t-background-transparent-medium: #0c6a3d1f;
  --t-background-transparent-strong: #0c6a3d33;
  --t-background-transparent-blue: #0c6a3d14;

  /* Poziomy wyniesienia Material 3 (1, 2 i 4). Twenty mialo cienie na granicy
     widocznosci (alfa 0,04) - Material buduje nimi hierarchie, wiec sa
     wyrazniejsze i maja dwie skladowe: ostra przy krawedzi i rozmyta. */
  --t-box-shadow-light: 0px 1px 2px 0px #0000001f, 0px 1px 3px 1px #0000000f;
  --t-box-shadow-strong: 0px 1px 2px 0px #00000024, 0px 2px 6px 2px #00000014;
  --t-box-shadow-super-heavy: 0px 1px 3px 0px #00000029, 0px 4px 8px 3px #0000001f, 0px 12px 40px -12px #0000003d;
  --t-box-shadow-color: #0000001f;

  /* Glowny przycisk akcji (MainButton - "Kontynuuj" na logowaniu, przyciski
     zatwierdzajace w modalach). Twenty maluje go prawie czernia; w Material
     przycisk wypelniony ma kolor wiodacy, wiec bierze zielen marki.
     Ten token ma w calym bundlu 2 uzycia, obydwa to wlasnie ta rola - stad
     mozna go przemalowac bez skutkow ubocznych.
     Napis zostaje bialy (--t-font-color-inverted), kontrast 6,68:1. */
  --t-background-primary-inverted: #0c6a3d;
  --t-background-primary-inverted-hover: #00592e;
}

/* Twenty ma `font-family: Inter, sans-serif` wpisane na sztywno w regule
   `body` - sam token by tego nie ruszyl. Selektor `html body` (0,0,2) wygrywa
   z `body` (0,0,1) niezaleznie od kolejnosci arkuszy. */
html body {
  font-family: var(--t-font-family);
}

/* Rozmiar bazowy. Twenty odmierza od `html { font-size: 13px }` WSZYSTKIE
   rozmiary pisma (tokeny `--t-font-size-*` sa w rem), Material zaklada 14-16 px.
   To JEDYNA zmiana w tym pliku, ktora rusza uklad, a nie sama skore: tekst
   rosnie o ~7,7%, a odstepy nie (tokeny `--t-spacing-*` sa w px), wiec ekrany
   robia sie ciasniejsze w pionie - najbardziej widac to w tabeli rekordow.
   Cofniecie samej gestosci, bez reszty motywu: usunac ten jeden blok.
   `html:root` (0,1,1) bije `html` (0,0,1) niezaleznie od kolejnosci arkuszy. */
html:root {
  font-size: 14px;
}

/* --- Motyw ciemny ------------------------------------------------------- */

.dark.dark {
  --t-color-blue: #0c6a3d;
  --t-color-blue1: #07180e;
  --t-color-blue2: #042010;
  --t-color-blue3: #002f17;
  --t-color-blue4: #003c1c;
  --t-color-blue5: #004824;
  --t-color-blue6: #00552d;
  --t-color-blue7: #0e663b;
  --t-color-blue8: #297d4f;
  --t-color-blue9: #0c6a3d;
  --t-color-blue10: #3d8f5f;
  --t-color-blue11: #8fbe9f;
  --t-color-blue12: #cee5d5;

  --t-accent-primary: #004824;
  --t-accent-secondary: #004824;
  --t-accent-tertiary: #002f17;
  --t-accent-quaternary: #042010;
  --t-accent-accent1: #07180e;
  --t-accent-accent2: #042010;
  --t-accent-accent3: #002f17;
  --t-accent-accent4: #003c1c;
  --t-accent-accent5: #004824;
  --t-accent-accent6: #00552d;
  --t-accent-accent7: #0e663b;
  --t-accent-accent8: #297d4f;
  --t-accent-accent9: #0c6a3d;
  --t-accent-accent10: #3d8f5f;
  --t-accent-accent11: #8fbe9f;
  --t-accent-accent12: #cee5d5;
  --t-accent-accent3570: #297d4f;
  --t-accent-accent4060: #297d4f;
  --t-buttons-secondary-text-color: #8fbe9f;
  --t-border-color-blue: #0e663b;

  /* W Material ciemnym wyzszy poziom = jasniejsza powierzchnia (cienie na
     czarnym tle sa niewidoczne, hierarchie robi jasnosc). */
  --t-background-primary: #101410;
  --t-background-secondary: #161b17;
  --t-background-tertiary: #1c221d;
  --t-background-quaternary: #242b25;

  --t-border-color-light: #1c221d;
  --t-border-color-medium: #242b25;
  --t-border-color-strong: #465048;

  --t-font-color-primary: #e6ece7;
  --t-font-color-secondary: #b2bcb4;
  --t-font-color-tertiary: #808a82;
  --t-font-color-light: #656e67;
  --t-font-color-extra-light: #4b534d;

  --t-background-transparent-light: #7fd0a30f;
  --t-background-transparent-lighter: #7fd0a308;
  --t-background-transparent-medium: #7fd0a31f;
  --t-background-transparent-strong: #7fd0a333;
  --t-background-transparent-blue: #7fd0a31f;

  --t-box-shadow-light: 0px 1px 2px 0px #0000005c, 0px 1px 3px 1px #00000047;
  --t-box-shadow-strong: 0px 1px 2px 0px #00000070, 0px 2px 6px 2px #0000005c;
  --t-box-shadow-super-heavy: 0px 1px 3px 0px #0000008a, 0px 4px 8px 3px #00000070, 0px 12px 40px -12px #000000a3;
  --t-box-shadow-color: #0000005c;

  /* W ciemnym motywie napis na tym przycisku jest CIEMNY
     (--t-font-color-inverted = #171717), wiec tlo musi byc jasna zielenia -
     tak samo jak Material odwraca role primary/on-primary w ciemnym schemacie.
     Zielen marki dalaby tu ciemny tekst na ciemnym tle. */
  --t-background-primary-inverted: #8fbe9f;
  --t-background-primary-inverted-hover: #a9d0b6;
}