/* =========================================================
   Szpiegomat · Design Tokens
   Zrodlo prawdy dla kolorow, typografii, spacingu, cieni,
   promieni, animacji.

   Zmiana tokena = zmiana wszedzie w motywie.
   ========================================================= */
:root {
  /* ——— Color · Brand ——— */
  --brand: #E30512;
  --brand-50: rgba(227, 5, 18, 0.08);
  --brand-100: rgba(227, 5, 18, 0.15);
  --brand-shadow: rgba(227, 5, 18, 0.25);

  /* ——— Color · Neutrals ——— */
  --ink: #0B1220;            /* tekst glowny, naglowki */
  --muted: #5B6775;          /* tekst drugorzedny */
  --line: rgba(11, 18, 32, 0.06);   /* bordery, separatory */
  --line-strong: rgba(11, 18, 32, 0.12);
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;    /* tla sparkline, paneli */
  --bg-soft: #F4F6F8;        /* tlo hero */

  /* ——— Color · Semantic ——— */
  --success: #047857;
  --success-bg: rgba(16, 185, 129, 0.10);
  --danger: var(--brand);
  --danger-bg: var(--brand-50);

  /* ——— Typography ——— */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* skala fontow */
  --fs-h1: 58px;
  --fs-h2: 44px;
  --fs-h3: 20px;           /* podtytul pod h2 */
  --fs-lead: 17px;         /* paragraf hero */
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-xs: 13px;
  --fs-micro: 11px;        /* eyebrow, uppercase */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --ls-tight: -1.8px;      /* h1 */
  --ls-h2: -1.2px;         /* h2 */
  --ls-eyebrow: 0.4px;     /* uppercase eyebrow */

  /* ——— Spacing (4px baseline) ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ——— Layout ——— */
  --container-max: 1280px;
  --page-gutter: 64px;
  --section-py: 110px;

  /* ——— Radii ——— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ——— Shadows ——— */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.08), 0 4px 16px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(11, 18, 32, 0.15), 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(11, 18, 32, 0.18), 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-xl: 0 30px 80px -20px rgba(11, 18, 32, 0.22), 0 2px 6px rgba(11, 18, 32, 0.05);

  --shadow-brand: 0 4px 14px var(--brand-shadow),
                  inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
}

/* Reduced motion — JS musi dodatkowo zatrzymac setInterval */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}