/* Wygenerowane przez narzedzia/recenzja/build.py z katalogu komponentów — nie edytować. Źródło: src/tokens.css */
/*
  Tokeny T-Mobile Business — odczyt z Figmy (plik T-Mobile-B2B), 2026-10-22; kolor/magenta-tekst 2026-10-28.
  Kolekcje: „T-Mobile · tokeny” (tryb Domyślny) + „T-Mobile · skala” (tryb Desktop).
  Nazwy zmiennych = code syntax z Figmy = nazwy motywu Tailwind v4 (@theme).
  Komentarz przy każdej linii = nazwa zmiennej w Figmie. Nie edytować ręcznie
  bez zmiany w Figmie — procedura w docs/zadania/katalog-komponentow/brief.md.
*/
:root {
  /* ── Kolory · prymitywy ─────────────────────────────── */
  --color-magenta: #E20074; /* kolor/magenta */
  --color-magenta-hover: #CC0169; /* kolor/magenta-hover */
  --color-magenta-10: #E200741A; /* kolor/magenta-10 */
  --color-magenta-30: #E200744D; /* kolor/magenta-30 */
  --color-magenta-text: #DC0071; /* kolor/magenta-tekst */
  --color-black: #060606; /* kolor/czarny */
  --color-black-hover: #2B2B2B; /* kolor/czarny-hover */
  --color-black-0: #06060600; /* kolor/czarny-0 */
  --color-black-10: #0606061A; /* kolor/czarny-10 */
  --color-black-15: #06060626; /* kolor/czarny-15 */
  --color-black-20: #06060633; /* kolor/czarny-20 */
  --color-black-30: #0606064D; /* kolor/czarny-30 */
  --color-black-45: #06060673; /* kolor/czarny-45 */
  --color-black-50: #06060680; /* kolor/czarny-50 */
  --color-white: #FFFFFF; /* kolor/bialy */
  --color-white-hover: #F3F3F3; /* kolor/bialy-hover */
  --color-white-0: #FFFFFF00; /* kolor/bialy-0 */
  --color-white-10: #FFFFFF1A; /* kolor/bialy-10 */
  --color-white-20: #FFFFFF33; /* kolor/bialy-20 */
  --color-white-50: #FFFFFF80; /* kolor/bialy-50 */
  --color-light-grey: #F5F6F7; /* kolor/jasnoszary */
  --color-graphite: #697178; /* kolor/grafit */
  --color-graphite-hover: #4C545B; /* kolor/grafit-hover */
  --color-graphite-light: #CCD6DE; /* kolor/grafit-jasny */
  --color-graphite-light-30: #CCD6DE4D; /* kolor/grafit-jasny-30 */
  --color-blue: #53BAF2; /* kolor/niebieski */
  --color-blue-light: #EEF8FE; /* kolor/niebieski-jasny */
  --color-gold: #E1B071; /* kolor/zloty */
  --color-panel-dark-90: #292929E5; /* kolor/panel-ciemny-90 */
  --color-panel-dark-70: #292929B2; /* kolor/panel-ciemny-70 */

  /* ── Kolory · semantyka: tło ────────────────────────── */
  --color-surface: var(--color-white); /* tło/jasne */
  --color-surface-hover: var(--color-white-hover); /* tło/jasne-hover */
  --color-surface-subtle: var(--color-light-grey); /* tło/jasnoszare */
  --color-surface-dark: var(--color-black); /* tło/ciemne */
  --color-surface-dark-hover: var(--color-black-hover); /* tło/ciemne-hover */
  --color-surface-panel: var(--color-panel-dark-90); /* tło/panel */
  --color-surface-panel-translucent: var(--color-panel-dark-70); /* tło/panel-przejrzysty */
  --color-surface-accent: var(--color-magenta); /* tło/akcent */
  --color-surface-accent-hover: var(--color-magenta-hover); /* tło/akcent-hover */
  --color-surface-accent-subtle: var(--color-magenta-10); /* tło/akcent-delikatne */
  --color-surface-neutral: var(--color-graphite); /* tło/grafit */
  --color-surface-neutral-hover: var(--color-graphite-hover); /* tło/grafit-hover */
  --color-surface-disabled: var(--color-graphite-light); /* tło/nieaktywne */
  --color-surface-on-accent: var(--color-black-15); /* tło/na-akcencie */
  --color-surface-on-dark: var(--color-white-10); /* tło/na-ciemnym */
  --color-overlay: var(--color-black-50); /* tło/przesłona */
  --color-surface-outline-on-dark: var(--color-white-0); /* tło/obrysowy-na-ciemnym */
  --color-surface-outline-on-dark-hover: var(--color-white-20); /* tło/obrysowy-na-ciemnym-hover */
  --color-surface-outline-on-light: var(--color-black-0); /* tło/obrysowy-na-jasnym */
  --color-surface-outline-on-light-hover: var(--color-black-20); /* tło/obrysowy-na-jasnym-hover */
  --color-surface-segment-hover: var(--color-graphite-light-30); /* tło/segment-hover */
  --color-scrollbar-track: var(--color-black-10); /* tło/pasek-przewijania */

  /* ── Kolory · semantyka: tekst ──────────────────────── */
  --color-fg: var(--color-black); /* tekst/podstawowy */
  --color-fg-muted: var(--color-graphite); /* tekst/wyciszony */
  --color-fg-accent: var(--color-magenta); /* tekst/akcent */
  --color-fg-accent-on-subtle: var(--color-magenta-text); /* tekst/akcent-na-jasnoszarym */
  --color-fg-on-dark: var(--color-white); /* tekst/na-ciemnym */
  --color-fg-on-dark-secondary: var(--color-light-grey); /* tekst/na-ciemnym-drugorzędny */
  --color-fg-on-dark-muted: var(--color-graphite-light); /* tekst/na-ciemnym-wyciszony */
  --color-fg-on-accent: var(--color-white); /* tekst/na-akcencie */

  /* ── Kolory · semantyka: obrys ──────────────────────── */
  --color-line: var(--color-graphite); /* obrys/domyślny */
  --color-line-subtle: var(--color-graphite-light); /* obrys/subtelny */
  --color-line-faint: var(--color-light-grey); /* obrys/delikatny */
  --color-line-strong: var(--color-black); /* obrys/mocny */
  --color-line-on-dark: var(--color-white); /* obrys/na-ciemnym */
  --color-line-focus: var(--color-black); /* obrys/fokus */
  --color-line-error: var(--color-magenta); /* obrys/błąd */
  --color-line-accent: var(--color-magenta); /* obrys/akcent */

  /* ── Kolory · semantyka: ikona, wyróżnienie ─────────── */
  --color-icon: var(--color-black); /* ikona/podstawowa */
  --color-icon-muted: var(--color-graphite); /* ikona/wyciszona */
  --color-icon-accent: var(--color-magenta); /* ikona/akcent */
  --color-icon-accent-on-subtle: var(--color-magenta-text); /* ikona/akcent-na-jasnoszarym */
  --color-icon-on-dark: var(--color-white); /* ikona/na-ciemnym */
  --color-icon-on-dark-secondary: var(--color-light-grey); /* ikona/na-ciemnym-drugorzędna */
  --color-icon-on-dark-muted: var(--color-graphite-light); /* ikona/na-ciemnym-wyciszona */
  --color-icon-disabled: var(--color-graphite-light); /* ikona/nieaktywna */
  --color-highlight: var(--color-gold); /* wyróżnienie/złote */

  /* ── Odstępy ────────────────────────────────────────── */
  --spacing-0: 0rem; /* odstep/0 · 0px */
  --spacing-2: 0.125rem; /* odstep/2 · 2px */
  --spacing-3: 0.1875rem; /* odstep/3 · 3px */
  --spacing-4: 0.25rem; /* odstep/4 · 4px */
  --spacing-5: 0.3125rem; /* odstep/5 · 5px */
  --spacing-6: 0.375rem; /* odstep/6 · 6px */
  --spacing-8: 0.5rem; /* odstep/8 · 8px */
  --spacing-9: 0.5625rem; /* odstep/9 · 9px */
  --spacing-10: 0.625rem; /* odstep/10 · 10px */
  --spacing-11: 0.6875rem; /* odstep/11 · 11px */
  --spacing-12: 0.75rem; /* odstep/12 · 12px */
  --spacing-15: 0.9375rem; /* odstep/15 · 15px */
  --spacing-16: 1rem; /* odstep/16 · 16px */
  --spacing-20: 1.25rem; /* odstep/20 · 20px */
  --spacing-24: 1.5rem; /* odstep/24 · 24px */
  --spacing-25: 1.5625rem; /* odstep/25 · 25px */
  --spacing-30: 1.875rem; /* odstep/30 · 30px */
  --spacing-40: 2.5rem; /* odstep/40 · 40px */
  --spacing-50: 3.125rem; /* odstep/50 · 50px */
  --spacing-60: 3.75rem; /* odstep/60 · 60px */
  --spacing-100: 6.25rem; /* odstep/100 · 100px */
  --spacing-page-x: 12.1875rem; /* uklad/margines-strony · 195px */
  --spacing-shell-x: 5.9375rem; /* uklad/wnetrze-shellu · 95px */
  --spacing-page-x-mobile: var(--spacing-20); /* uklad/margines-mobile */

  /* ── Promienie ──────────────────────────────────────── */
  --radius-5: 0.3125rem; /* promien/5 · 5px */
  --radius-10: 0.625rem; /* promien/10 · 10px */
  --radius-14: 0.875rem; /* promien/14 · 14px – pozycja listy: promień listy 20 − padding 6 */
  --radius-20: 1.25rem; /* promien/20 · 20px */
  --radius-30: 1.875rem; /* promien/30 · 30px */
  --radius-40: 2.5rem; /* promien/40 · 40px */
  --radius-50: 3.125rem; /* promien/50 · 50px */
  --radius-60: 3.75rem; /* promien/60 · 60px */
  --radius-100: 6.25rem; /* promien/100 · 100px */

  /* ── Typografia (tryb Desktop) ──────────────────────── */
  --font-sans: "TeleNeo", "Tele Neo", system-ui, sans-serif; /* rodzina TeleNeo */
  --font-weight-regular: 400; /* TeleNeo Regular */
  --font-weight-medium: 500; /* TeleNeo Medium */
  --font-weight-bold: 700; /* TeleNeo Bold */
  --font-weight-extrabold: 800; /* TeleNeo ExtraBold */
  --text-h1: 3.8125rem; /* typografia/h1/rozmiar · 61px */
  --text-h1--line-height: 3.8125rem; /* typografia/h1/interlinia · 61px */
  --text-h2: 3.0625rem; /* typografia/h2/rozmiar · 49px */
  --text-h2--line-height: 3.4375rem; /* typografia/h2/interlinia · 55px */
  --text-h3: 2.4375rem; /* typografia/h3/rozmiar · 39px */
  --text-h3--line-height: 2.8125rem; /* typografia/h3/interlinia · 45px */
  --text-h4: 1.9375rem; /* typografia/h4/rozmiar · 31px */
  --text-h4--line-height: 2.3125rem; /* typografia/h4/interlinia · 37px */
  --text-h5: 1.5625rem; /* typografia/h5/rozmiar · 25px */
  --text-h5--line-height: 1.9375rem; /* typografia/h5/interlinia · 31px */
  --text-a2: 1.5625rem; /* typografia/a2/rozmiar · 25px */
  --text-a2--line-height: 1.9375rem; /* typografia/a2/interlinia · 31px */
  --text-a1: 1.25rem; /* typografia/a1/rozmiar · 20px */
  --text-a1--line-height: 1.625rem; /* typografia/a1/interlinia · 26px */
  --text-t2: 1rem; /* typografia/t2/rozmiar · 16px */
  --text-t2--line-height: 1.375rem; /* typografia/t2/interlinia · 22px */
  --text-t1: 0.875rem; /* typografia/t1/rozmiar · 14px */
  --text-t1--line-height: 1.25rem; /* typografia/t1/interlinia · 20px */
  --text-s1: 0.75rem; /* typografia/s1/rozmiar · 12px */
  --text-s1--line-height: 1.125rem; /* typografia/s1/interlinia · 18px */

  /* ── Rozmiary responsywne (tryb Desktop) ────────────── */
  --size-pill-min: 2.625rem; /* rozmiar/pigułka-min-wysokość · 42px */
  --size-choice: 1.25rem; /* rozmiar/kontrolka-wyboru · 20px */
  --size-tap-min: 1.5rem; /* rozmiar/cel-dotyku-min · 24px */
  --spacing-chip-y: var(--spacing-5); /* odstep/chip-pion */
  --spacing-card: var(--spacing-40); /* odstep/karta */
  --spacing-link-icon: var(--spacing-5); /* odstep/link-ikona */
  --spacing-link-icon-hover: var(--spacing-10); /* odstep/link-ikona-hover */
  --spacing-tile-frame: var(--spacing-20); /* odstep/obwódka-kafla */
  --radius-tile-panel: var(--radius-20); /* promien/panel-kafla */

  /* ── Efekty (style efektów) ─────────────────────────── */
  --shadow-floating: 0 8px 24px var(--color-black-15); /* cień/pływający */
  --shadow-floating-strong: 0 8px 24px var(--color-black-45); /* cień/pływający-mocny */
  --shadow-sticky: 0 3px 6px #0606060D, 0 12px 12px #0606060A, 0 26px 16px #06060608, 0 46px 18px #06060603, 0 72px 20px #06060600; /* cień/przyklejony */
  --shadow-text-on-photo: 0 3px 20px var(--color-black-30); /* cień/tekst-na-zdjęciu */
  --shadow-glow-accent: 0 0 20px var(--color-magenta); /* poświata/akcent */
  --shadow-glow-accent-subtle: 0 0 20px var(--color-magenta-30); /* poświata/akcent-delikatna */
  --shadow-emboss: inset 2px 2px 6px var(--color-white-50); /* wypukłość */
  --shadow-deboss: inset 0 0 5px var(--color-black-20); /* wklęsłość */
  --blur-glass-lg: 20px; /* szkło/duże */
  --blur-glass-sm: 7px; /* szkło/małe */

  /* ── Ruch (z opisów komponentów) ────────────────────── */
  --ease-brand: cubic-bezier(0.76, 0, 0.24, 1); /* SMART_ANIMATE w prototypie */
  --duration-hover: 400ms; /* hover 0,4 s */
  --duration-press: 100ms; /* przytrzymanie 0,1 s */
  /* rozwijanie (PYTANIE FAQ, ZGODA): sprężyna stiffness 300 / damping 30 / masa 1 próbkowana do linear();
     referencja ruchu: morphin.dev „Smooth Expand Accordion” (2026-10-28) */
  --ease-expand: linear(0, 0.062, 0.197, 0.353, 0.506, 0.636, 0.742, 0.824, 0.884, 0.928, 0.958, 0.978, 0.99, 0.998, 1.002, 1.003, 1.004, 1.004, 1.003, 1.003, 1.002, 1.002, 1.001, 1.001, 1);
  --duration-expand: 540ms;
}