/* Wspólne tokeny wyglądu i ruchu (standard UI/UX §4a i §5). Jedno źródło wartości dla panelu, paska modułów
   i kolejnych modułów; moduły czytają zmienne zamiast wpisywać kolory, promienie, cienie i czasy na sztywno.
   Kontrasty WCAG policzone na tle, na którym dana para występuje. */
:root{
  /* Baza: grafit, biel, neutralne szarości i róż */
  --x-ink:#1d232a;        /* tekst główny: 15,8:1 na białym, 14,4:1 na --x-page */
  --x-rail:#232b36;       /* pasek modułów i nagłówek telefonu; biały tekst 14,3:1 */
  --x-rail-text:#aeb8c6;  /* nieaktywne pozycje paska: 7,1:1 */
  --x-rail-label:#929dad; /* etykiety sekcji paska: 5,2:1 */
  --x-page:#f3f4f7;       /* tło treści */
  --x-surface:#fff;       /* karty, wiersze, okna */
  --x-soft:#f3f4f7;       /* tło najechania i pól pomocniczych */
  --x-line:#e3e7ed;       /* linie podziału (dekoracyjne, nie granica kontrolki) */
  --x-field:#8794a3;      /* ramka pól formularzy: 3,1:1 (WCAG 1.4.11) */
  --x-muted:#5f6874;      /* tekst drugorzędny: 5,7:1 na białym, 5,1:1 na --x-page */
  --x-brand:#d92558;      /* główny przycisk; biały tekst 4,8:1 */
  --x-brand-h:#bd1b49;    /* najechanie i tekst różowy na --x-brand-soft (5,6:1) */
  --x-brand-soft:#fff0f4; /* tło zaznaczenia; różowy tekst tylko w odcieniu --x-brand-h */
  --x-brand-rail:#ff5b87; /* aktywny znacznik na grafitowym pasku: 4,8:1 */
  /* Kolory funkcjonalne (bez neutralizacji) */
  --x-ok:#23734b;         /* 5,8:1 */
  --x-ok-soft:#edf6f0;
  --x-danger:#b0283f;     /* tekst błędu, wydatki: 6,5:1 */
  --x-danger-line:#c2334d;/* ramka pola z błędem: 5,4:1 */
  --x-warn:#7a4f08;       /* tekst ostrzeżenia na --x-warn-soft: 6,5:1 */
  --x-warn-soft:#fff4e0;
  --x-plan:#33465c;       /* stan „Zaplanowana” (Pomysły) na --x-plan-soft: 8,4:1 */
  --x-plan-soft:#eaf0f6;
  --x-focus:0 0 0 4px rgba(217,37,88,.14);
  /* Zaokrąglenia: kontrolka < wiersz < karta < okno */
  --x-r-control:10px;     /* przyciski, pola, chipy */
  --x-r-row:14px;         /* wiersze list, małe karty */
  --x-r-card:16px;        /* karty boczne, arkusze w treści */
  --x-r-dialog:22px;      /* okna, karta logowania, arkusz telefonu (górne rogi) */
  /* Cienie: trzy poziomy wysokości */
  --x-shadow-1:0 1px 2px rgba(29,35,42,.06);                 /* spoczynek wiersza/karty */
  --x-shadow-2:0 8px 20px -10px rgba(29,35,42,.22);          /* najechanie wiersza, okienko listy */
  --x-shadow-3:0 30px 80px -24px rgba(16,24,32,.45),0 8px 22px -10px rgba(16,24,32,.3); /* okna i arkusze */
  /* Ruch (§5) */
  --x-ease:cubic-bezier(.22,1,.36,1);
  --x-spring:cubic-bezier(.34,1.45,.5,1);
  --x-exit:cubic-bezier(.4,0,1,1);
  --x-t-hover:.12s;
  --x-t-press:.12s;
  --x-t-fade:.2s;
  --x-t-content:.28s;     /* nowa treść modułu/zakładki */
  --x-t-marker:.34s;      /* znacznik w pasku */
  --x-t-entry:.38s;       /* wejście panelu, arkusz */
  --x-t-cascade:45ms;     /* krok kaskady wierszy */
  --x-font:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
}
@media(prefers-reduced-motion:reduce){
  :root{--x-t-hover:1ms;--x-t-press:1ms;--x-t-fade:1ms;--x-t-content:1ms;--x-t-marker:1ms;--x-t-entry:1ms;--x-t-cascade:0ms}
}
/* Rozmiar interfejsu rośnie z wysokością ekranu, jak skalowanie systemu (standard §4d): monitory 27″ i 34″ 21:9
   przy 100% skalowania pokazują treść czytelnie z odległości stanowiska. Telefon i laptop bez zmian. */
@media(min-height:1000px) and (min-width:1600px){html{zoom:1.125}}
@media(min-height:1150px) and (min-width:1900px){html{zoom:1.25}}
@media(min-height:1350px) and (min-width:2200px){html{zoom:1.5}}