/**
 * Zapisy.pro – Design tokens (jedno źródło prawdy)
 * Wspólne dla: panel admin, frontend publiczny, PWA instruktora.
 * Estetyka „przyjazna" (Calendly/Notion): ciepłe neutralne, większe zaokrąglenia,
 * miękkie warstwowe cienie, hojny spacing. Marka: granat #1d1c57 + cyan #00c3f2.
 *
 * Zawiera aliasy wsteczne do starych nazw (admin: --zp-navy…, frontend: --zp-primary…),
 * więc istniejący CSS działa bez zmian i automatycznie dostaje „lift".
 *
 * @package ZP_Pro
 */
:root {
  /* ── Marka ───────────────────────────────────────────────── */
  --zp-navy: #1d1c57;            /* tekst, naglowki, przycisk glowny z BIALYM napisem (15,5:1 na bieli) */
  --zp-navy-mid: #2a2871;        /* tlo srednie: gradienty, paski */
  --zp-navy-light: #35347a;      /* hover przycisku glownego, obramowanie aktywne (10,9:1 z bialym) */
  --zp-accent: #00c3f2;          /* WYPELNIENIA i stan aktywny; na bieli 2,1:1 — NIGDY tekst ani cienka ikona */
  --zp-accent-hover: #00a8d4;    /* ciemniejszy cyan do wypelnien BEZ tekstu (hover kafla, pasek) */
  --zp-accent-soft: #e6f8fe;     /* jasne tlo cyanowe (badge, „dzis"); tekst na nim: --zp-accent-ink 9,2:1 */
  --zp-accent-ink: #05485c;      /* czytelny wariant cyanu NA BIELI, gdy potrzebny TEKST lub ikona (10,1:1) */

  /* ── Stany ───────────────────────────────────────────────── */
  --zp-green: #0d6e3e;  --zp-green-soft: #e7f5ee;
  --zp-red: #c0392b;    --zp-red-soft: #fdf0ee;
  --zp-yellow: #8a5e00; --zp-yellow-soft: #fff7e3;
  --zp-blue: #1558ac;   --zp-blue-soft: #e9f1fc;
  --zp-warning: #b26a00;
  --zp-gray: #596577;   --zp-gray-soft: #eef1f5;

  /* ── Powierzchnie (przyjazne, ciepło-neutralne) ──────────── */
  --zp-bg: #f4f6fb;
  --zp-surface: #ffffff;
  --zp-surface-2: #f7f9fc;
  --zp-border: #e6ebf2;
  --zp-border-s: #d3dbe6;

  /* ── Tekst (4 poziomy, kontrast pod WCAG AA) ─────────────── */
  --zp-text: #14233a;
  --zp-text-2: #3d5068;
  --zp-text-m: #5b6d84;
  --zp-text-l: #6f7d91; /* przyciemnione pod WCAG (drobne podpowiedzi w adminie); na froncie text-l = tylko dekoracja/disabled */

  /* ── Skala odstępów ──────────────────────────────────────── */
  --zp-space-1: 4px;  --zp-space-2: 8px;  --zp-space-3: 12px; --zp-space-4: 16px;
  --zp-space-5: 20px; --zp-space-6: 24px; --zp-space-7: 32px; --zp-space-8: 40px;
  --zp-space-9: 56px; --zp-space-10: 72px;

  /* ── Promienie (przyjazne: większe) ──────────────────────── */
  --zp-r: 10px; --zp-r-md: 14px; --zp-r-lg: 18px; --zp-r-xl: 24px; --zp-r-pill: 999px;

  /* ── Cienie (miękkie, warstwowe) ─────────────────────────── */
  --zp-sh-xs: 0 1px 2px rgba(20,35,58,.05);
  --zp-sh-sm: 0 2px 8px rgba(20,35,58,.06), 0 1px 2px rgba(20,35,58,.04);
  --zp-sh:    0 6px 20px rgba(20,35,58,.08), 0 2px 6px rgba(20,35,58,.05);
  --zp-sh-lg: 0 16px 40px rgba(20,35,58,.14);

  /* ── Typografia ──────────────────────────────────────────── */
  --zp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --zp-fs-xs: 12px; --zp-fs-sm: 13px; --zp-fs: 14px; --zp-fs-md: 15px;
  --zp-fs-lg: 18px; --zp-fs-xl: 22px; --zp-fs-2xl: 28px;

  /* ── Ruch ────────────────────────────────────────────────── */
  --zp-ease: cubic-bezier(.4,0,.2,1);
  --zp-ease-spring: cubic-bezier(.2,.8,.2,1);
  --zp-dur-1: 120ms; --zp-dur-2: 200ms; --zp-dur-3: 320ms;
  --zp-transition: var(--zp-dur-2) var(--zp-ease);

  /* ── Focus / z-index ─────────────────────────────────────── */
  --zp-focus: 0 0 0 3px rgba(21,88,172,.38);
  --zp-z-sticky: 20; --zp-z-toast: 9000; --zp-z-modal: 9500;

  /* ── Aliasy wsteczne: nazwy z frontendu (zp-enrollment) ──── */
  --zp-primary: var(--zp-navy);
  --zp-primary-light: var(--zp-navy-light);
  --zp-success: var(--zp-green);
  --zp-danger: var(--zp-red);
  --zp-surface-idle: var(--zp-surface-2);
  --zp-border-dark: var(--zp-border-s);
  --zp-text-main: var(--zp-text);
  --zp-text-muted: var(--zp-text-m);
  --zp-shadow-sm: var(--zp-sh-sm);
  --zp-shadow-md: var(--zp-sh);
  --zp-radius: var(--zp-r);
  --zp-radius-lg: var(--zp-r-md);

  /* Czasy animacji (semantyczne aliasy) */
  --zp-dur-fast: var(--zp-dur-1);
  --zp-dur-base: var(--zp-dur-2);
  --zp-dur-slow: var(--zp-dur-3);

  /* Miękkie tła stanów (aliasy dla badge/hero/empty na froncie) */
  --zp-success-soft: var(--zp-green-soft);
  --zp-danger-soft:  var(--zp-red-soft);
  --zp-warning-soft: var(--zp-yellow-soft);
  --zp-info-soft:    var(--zp-blue-soft);
}

/* ── Dark mode – PRZYGOTOWANE (gated). Aktywacja: <html data-zp-theme="dark">.
   Aby włączyć wg preferencji systemu, skopiuj ten blok pod @media (prefers-color-scheme: dark). ── */
[data-zp-theme="dark"] {
  --zp-bg: #0e1726;
  --zp-surface: #16202e;
  --zp-surface-2: #1c2838;
  --zp-border: #2a3a4f;
  --zp-border-s: #3a4d66;
  --zp-text: #e8edf4;
  --zp-text-2: #c2ccd9;
  --zp-text-m: #93a3b4;
  --zp-text-l: #6b7c8f;
  --zp-green-soft: #12301f; --zp-red-soft: #321a17; --zp-yellow-soft: #2e2410;
  --zp-blue-soft: #14233a; --zp-accent-soft: #0b2b36; --zp-gray-soft: #1c2838;
  --zp-accent-ink: #8ddcf5; /* na ciemnym tle tekst cyanowy musi byc JASNY (10,7:1 na --zp-surface) */
  --zp-sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --zp-sh-sm: 0 2px 8px rgba(0,0,0,.45);
  --zp-sh:    0 6px 20px rgba(0,0,0,.55);
  --zp-sh-lg: 0 16px 40px rgba(0,0,0,.6);
  --zp-focus: 0 0 0 3px rgba(90,150,230,.5);
}

/* Globalnie szanuj preferencję ograniczonego ruchu (A11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}