/* Kier design tokens — WYGENEROWANE z tokens.json przez build.js. Nie edytuj ręcznie. */
/* Breakpointy (do media queries, CSS nie pozwala na var() w @media): sm 520px, md 900px, lg 1200px */

:root {
  --color-graphite-600: #2A2D33; /* Linia w ciemnym motywie */
  --color-graphite-700: #1D2026; /* Powierzchnia: podniesiona powierzchnia */
  --color-graphite-800: #17191D; /* Panel: powierzchnia na tle grafitu */
  --color-graphite-900: #0F1012; /* Grafit: tło ciemnego motywu, tekst jasnego */
  --color-gray-500: #8A8F98; /* Szary: tekst drugorzędny na ciemnym (5,9:1) */
  --color-gray-600: #5F636B; /* Szary jasny: tekst drugorzędny na jasnym (5,1:1) */
  --color-bone-50: #F7F6F3; /* Papier: podniesiona powierzchnia w jasnym motywie */
  --color-bone-100: #EDEBE6; /* Kość: tekst ciemnego motywu, tło jasnego */
  --color-bone-200: #D9D6CF; /* Linia w jasnym motywie */
  --color-ice-200: #C9DBFA; /* Lód jasny: hover akcentu na ciemnym */
  --color-ice-300: #9DBEF5; /* Lód: akcent na ciemnym (10,1:1) */
  --color-ice-500: #5E86D6; /* Lód głęboki: logo i grafika na jasnym (3,0:1, nie do tekstu) */
  --color-ice-700: #3A5FAA; /* Lód tekst: linki i akcenty tekstowe na jasnym (5,2:1) */
  --color-mint-300: #8FD3B0;
  --color-mint-700: #2B7050;
  --color-coral-300: #EE8467;
  --color-coral-700: #A8432D;
  --color-amber-300: #E3B15A;
  --color-amber-700: #825C10;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* Głos marki: wordmark, nagłówki, duże liczby */
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif; /* Czytelność: tekst, tabele, formularze */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Precyzja: etykiety, metadane, numery, kod. Nigdy w nagłówkach ani dłuższych zdaniach */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xs: 0.75rem; /* 12 px: etykiety mono, przypisy */
  --text-sm: 0.875rem; /* 14 px: drugorzędny tekst, tabele */
  --text-base: 1rem; /* 16 px: tekst */
  --text-lg: 1.125rem; /* 18 px: lead */
  --text-xl: 1.5rem; /* 24 px: h4 */
  --text-2xl: 2rem; /* 32 px: h3 */
  --text-3xl: 2.5rem; /* 40 px: h2 */
  --text-4xl: 3.5rem; /* 56 px: h1 */
  --text-5xl: 4.5rem; /* 72 px: display (hero) */
  --leading-tight: 1.05; /* display */
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --leading-mono: 1.4;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body: 0em;
  --tracking-label: 0.05em; /* etykiety mono WIELKIMI literami (nagłówki tabel) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */
  --space-gutter: var(--space-4); /* margines boczny na telefonie */
  --space-section: var(--space-9); /* odstęp między sekcjami strony */
  --container: 75rem; /* 1200 px */
  --measure: 68ch; /* max długość wiersza tekstu (55–75 znaków) */
  --radius-sm: 4px; /* znaczniki, pola */
  --radius-md: 8px; /* przyciski, pola formularzy */
  --radius-lg: 16px; /* karty, panele */
  --radius-pill: 999px;
  --border-width: 1px;
  --border-focus: 2px;
  --shadow-float: 0px 12px 32px -12px #00000066;
  --duration-fast: 150ms; /* hover, przyciski, focus */
  --duration-base: 250ms; /* rozwijanie, zmiana stanu */
  --duration-slow: 450ms; /* wejście sekcji, scroll */
  --duration-intro: 1200ms; /* maksimum dla logo i hero */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* domyślna krzywa */
  --ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1); /* kliknięcie strzałki, lekkie odbicie */
  --nudge: 3px; /* sygnatura marki: strzałka przesuwa się w prawo przy hover */
  --print-text-display: 38pt; /* tytuł okładki */
  --print-text-h1: 24pt; /* nagłówek sekcji */
  --print-text-number: 22pt; /* duże liczby: ceny, statystyki */
  --print-text-h2: 13pt; /* podtytuł w sekcji */
  --print-text-lead: 11pt; /* wstęp sekcji, podtytuł okładki */
  --print-text-body: 9.5pt; /* tekst, tabele */
  --print-text-small: 8pt; /* przypisy, opisy pod liczbami */
  --print-text-label: 7pt; /* etykiety mono WIELKIMI literami */
  --print-space-margin: 48pt; /* margines strony A4 (ok. 17 mm) */
  --print-card-name: 15pt; /* nazwa firmy */
  --print-card-tagline: 12.5pt; /* hasło na stronie głównej */
  --print-card-text: 7.5pt; /* deskryptor i dane kontaktowe */
  --print-card-logo: 21pt; /* wysokość logo na stronie głównej */
  --print-card-mark: 12.5pt; /* wysokość znaku na stronie z danymi */
  --print-card-bleed: 2mm; /* spad */
  --print-card-safe: 6mm; /* odstęp treści od linii cięcia */
  --print-flyer-bleed: 3mm; /* spad */
  --print-flyer-safe: 8mm; /* odstęp treści od linii cięcia */
}

/* Motyw ciemny: domyślny */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--color-graphite-900);
  --color-surface: var(--color-graphite-800);
  --color-surface-raised: var(--color-graphite-700);
  --color-line: var(--color-graphite-600);
  --color-text: var(--color-bone-100);
  --color-text-muted: var(--color-gray-500);
  --color-accent: var(--color-ice-300); /* przyciski, grafika, znak */
  --color-accent-hover: var(--color-ice-200);
  --color-accent-text: var(--color-ice-300); /* linki i akcenty w tekście */
  --color-on-accent: var(--color-graphite-900);
  --color-logo-bar: var(--color-bone-100);
  --color-logo-chevron: var(--color-ice-300);
  --color-success: var(--color-mint-300);
  --color-error: var(--color-coral-300);
  --color-warning: var(--color-amber-300);
  --color-focus: var(--color-ice-300);
}

/* Motyw jasny: przełącznik na stronie, strony środkowe wycen */
[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--color-bone-100);
  --color-surface: var(--color-bone-50);
  --color-surface-raised: #FFFFFF;
  --color-line: var(--color-bone-200);
  --color-text: var(--color-graphite-900);
  --color-text-muted: var(--color-gray-600);
  --color-accent: var(--color-graphite-900); /* główny przycisk na jasnym jest grafitowy; Lód zostaje akcentem graficznym */
  --color-accent-hover: var(--color-graphite-700);
  --color-accent-text: var(--color-ice-700);
  --color-on-accent: var(--color-bone-100);
  --color-logo-bar: var(--color-graphite-900);
  --color-logo-chevron: var(--color-ice-500);
  --color-success: var(--color-mint-700);
  --color-error: var(--color-coral-700);
  --color-warning: var(--color-amber-700);
  --color-focus: var(--color-ice-700);
}

/* Ograniczenie ruchu: od razu stan końcowy */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-intro: 0ms;
    --nudge: 0px;
  }
}