/*
 * ZSL — design tokens
 * Źródła: Przewodnik Identyfikacji Wizualnej (kolory firmowe), react-promo (skale, typografia, cienie),
 * symfony-sites (motywy jasny / ciemny / wysoki kontrast).
 * Skale: 100–400 = tint (mieszanie z bielą), 600–900 = shade (z czernią), jak w react-promo/_functions.scss.
 */

:root {
  /* ---------- Kolory firmowe (księga znaku) ---------- */
  /* Grafit — Pantone 432 C, RGB 41/49/51, RAL 7016 */
  --color-graphite-100: #7f8385;
  --color-graphite-200: #696f70;
  --color-graphite-300: #545a5c;
  --color-graphite-400: #3e4647;
  --color-graphite-500: #293133;
  --color-graphite-600: #252c2e;
  --color-graphite-700: #212729;
  --color-graphite-800: #1d2224;
  --color-graphite-900: #191d1f;

  /* Czerwień — Pantone 485 C, RGB 254/0/12, RAL 2002.
     WCAG AAA: 500 na białym = 4.02:1 → wyłącznie elementy nietekstowe (paski, wypełnienia).
     Tekst i przyciski: 800–900 (≥ 7:1). 50 — tekst czerwony na grafitowym tle (7.8:1). */
  --color-red-50: #ffb2b6;
  --color-red-100: #fe666d;
  --color-red-200: #fe4c55;
  --color-red-300: #fe333d;
  --color-red-400: #fe1a24;
  --color-red-500: #fe000c;
  --color-red-600: #e5000b;
  --color-red-700: #cb000a;
  --color-red-800: #b20008;
  --color-red-900: #980007;

  /* Granat — z react-promo, poza księgą znaku (akcent pomocniczy) */
  --color-blue-100: #6888a3;
  --color-blue-200: #4f7493;
  --color-blue-300: #366084;
  --color-blue-400: #1d4c74;
  --color-blue-500: #043865;
  --color-blue-600: #04325b;
  --color-blue-700: #032d51;
  --color-blue-800: #032747;
  --color-blue-900: #02223d;

  /* ---------- Neutralne i stany (react-promo) ---------- */
  --color-white: #fdfdfd;
  --color-black: #121212;

  --color-gray-100: #dee1e5;
  --color-gray-200: #d2d6db;
  --color-gray-300: #c6cbd1;
  --color-gray-400: #b9c0c7;
  --color-gray-500: #adb5bd;
  --color-gray-600: #939aa1;
  --color-gray-700: #797f84;
  --color-gray-800: #5f6468;
  --color-gray-900: #45484c;

  --color-info-100: #9eeaf9;
  --color-info-500: #0dcaf0;
  --color-info-800: #076f84;

  --color-success-100: #b0e9d7;
  --color-success-500: #39c79b;
  --color-success-800: #1f6d55;

  --color-warning-100: #f9eda1;
  --color-warning-500: #f0d215;
  --color-warning-800: #84740c;

  --color-danger-100: #faa69f;
  --color-danger-500: #f32010;
  --color-danger-700: #aa160b;
  --color-danger-800: #861209;

  /* ---------- Typografia ---------- */
  /* Propozycja (do akceptacji): Lato — treść i nagłówki (jak w obu dotychczasowych serwisach),
     Lexend Exa — zamiennik Engravers Gothic do haseł i wersalików. Alternatywy: preview/fonts.html */
  --font-body: 'Lato', system-ui, sans-serif;
  --font-heading: 'Lato', system-ui, sans-serif;
  --font-display: 'Lexend Exa', 'Lato', system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-h6: 1rem;
  --font-size-h5: 1.25rem;
  --font-size-h4: 1.5rem;
  --font-size-h3: 1.75rem;
  --font-size-h2: 2rem;
  --font-size-h1: 2.5rem;

  --line-height-sm: 1.25;
  --line-height-base: 1.5;
  --line-height-lg: 2;
  --line-height-heading: 1.2;

  /* Display — hasła banerów. 16 → 120 px = skala 7,5 : 1 */
  --font-size-display: clamp(3rem, 1.5rem + 6vw, 7.5rem);
  --line-height-display: 0.95;
  --tracking-display: -0.035em; /* ściśnięcie dużych krojów */
  --tracking-heading: -0.015em;
  --tracking-wide: 0.08em;      /* wersaliki krojem logotypowym */

  /* ---------- Odstępy (wartości faktycznie używane w react-promo) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ---------- Kształt, cień, ruch ---------- */
  --radius: 4px;
  --radius-full: 999px;

  /* react-promo @mixin box-shadow($depth) */
  --shadow-1: 0 1.5px 4px rgb(0 0 0 / 0.24), 0 1.5px 6px rgb(0 0 0 / 0.12);
  --shadow-2: 0 3px 12px rgb(0 0 0 / 0.23), 0 3px 12px rgb(0 0 0 / 0.16);
  --shadow-3: 0 6px 12px rgb(0 0 0 / 0.23), 0 10px 40px rgb(0 0 0 / 0.19);
  --shadow-4: 0 10px 20px rgb(0 0 0 / 0.22), 0 14px 56px rgb(0 0 0 / 0.25);
  --shadow-5: 0 15px 24px rgb(0 0 0 / 0.22), 0 19px 76px rgb(0 0 0 / 0.3);

  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.4s;
  --duration-reveal: 0.9s;
  /* Krzywe własne — żadnych ease / linear */
  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1); /* quart out — najechanie, zmiany stanu */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo out — wejścia elementów */
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);  /* expo in-out — przejścia między widokami */

  /* ---------- Layout ---------- */
  /* Breakpointy (custom properties nie działają w @media): sm 576px, md 768px, lg 992px, xl 1200px */
  --container-min: 320px;
  --container-max: 1400px;

  /* ---------- Semantyka: motyw jasny (domyślny) — WCAG 2.2 AAA ---------- */
  --color-bg: #ffffff;
  --color-bg-subtle: #f4f5f6;
  --color-surface: #ffffff;
  --color-text: var(--color-graphite-500);       /* 13.3:1 */
  --color-text-muted: var(--color-graphite-400); /* 9.7:1, na bg-subtle 8.9:1 */
  --color-border: var(--color-gray-300);
  --color-primary: var(--color-graphite-500);
  --color-on-primary: #ffffff;
  --color-accent: var(--color-red-500);          /* tylko elementy nietekstowe: paski, wypełnienia, grafika */
  --color-accent-strong: var(--color-red-800);   /* tło przycisku z białym tekstem: 7.3:1 */
  --color-on-accent: #ffffff;
  --color-link: var(--color-red-900);            /* 9.0:1, na bg-subtle 8.2:1 */
  --color-error: var(--color-danger-800);        /* 10.0:1 */
  --color-focus: var(--color-blue-500);
  --color-focus-inner: #ffffff; /* obwódka dwukolorowa — widoczna na każdym tle (2.4.13) */
}

[data-theme='dark'] {
  --color-bg: var(--color-graphite-900);
  --color-bg-subtle: var(--color-graphite-700);
  --color-surface: var(--color-graphite-600);
  --color-text: var(--color-white);
  --color-text-muted: var(--color-gray-400);
  --color-border: var(--color-graphite-300);
  --color-primary: var(--color-white);
  --color-on-primary: var(--color-graphite-900);
  --color-accent: var(--color-red-500);
  --color-accent-strong: var(--color-red-800);
  --color-on-accent: #ffffff;
  --color-link: var(--color-red-50);
  --color-error: var(--color-red-50);
  --color-focus: var(--color-info-500);
  --color-focus-inner: var(--color-graphite-900);
}

/* Jak w symfony-sites: czarne tło, biały tekst, żółte linki */
[data-theme='high-contrast'] {
  --color-bg: #000000;
  --color-bg-subtle: #000000;
  --color-surface: #000000;
  --color-text: #ffffff;
  --color-text-muted: #ffffff;
  --color-border: #ffffff;
  --color-primary: #ffffff;
  --color-on-primary: #000000;
  --color-accent: #ffff00;
  --color-accent-strong: #ffff00;
  --color-on-accent: #000000;
  --color-link: #ffff00;
  --color-error: #ffff00;
  --color-focus: #00ffff;
  --color-focus-inner: #000000;
}

/* WCAG 2.3.3: animacje wyłączane ustawieniem systemu lub przełącznikiem na stronie */
[data-motion='off'] {
  --duration-fast: 0s;
  --duration-base: 0s;
  --duration-slow: 0s;
  --duration-reveal: 0s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-base: 0s;
    --duration-slow: 0s;
    --duration-reveal: 0s;
  }
}