/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS (v127) — jeden spójny design system dla landing/formularz/raport
   Zmienne używane stopniowo w nowych stylach; stare style migrują iteracyjnie.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Kolory */
  --dh-primary: #2563EB;
  --dh-primary-dark: #1D4ED8;
  --dh-secondary: #14B8A6;
  --dh-success: #16A34A;
  --dh-warning: #F59E0B;
  --dh-danger: #DC2626;

  /* Tła i powierzchnie */
  --dh-bg: #F5F7FB;
  --dh-surface: #FFFFFF;
  --dh-surface-2: #EFF6FF;

  /* Tekst */
  --dh-text: #0F2A43;
  --dh-text-muted: #6B7280;

  /* Promienie */
  --dh-radius-sm: 8px;
  --dh-radius-md: 12px;
  --dh-radius-lg: 18px;

  /* Cienie */
  --dh-shadow-sm: 0 2px 8px rgba(15, 42, 67, 0.08);
  --dh-shadow-md: 0 8px 24px rgba(15, 42, 67, 0.12);

  /* Spacing scale */
  --dh-sp-1: 4px;
  --dh-sp-2: 8px;
  --dh-sp-3: 12px;
  --dh-sp-4: 16px;
  --dh-sp-5: 24px;
  --dh-sp-6: 32px;

  /* Minimalny obszar dotykowy (mobile) */
  --dh-touch: 44px;
}

/* ═══ DOSTĘPNOŚĆ ═══ */

/* Widoczny focus dla nawigacji klawiaturą — na całej aplikacji */
:focus-visible {
  outline: 3px solid var(--dh-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 3px solid var(--dh-secondary);
  outline-offset: 2px;
}

/* Ukrycie wizualne z zachowaniem dostępności dla czytników */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Ograniczenie animacji dla osób z preferencją reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Minimalny obszar dotykowy na mobile */
@media (max-width: 767px) {
  button, [role="button"], .pill-btn, .int-chip, .city-pick-chip {
    min-height: var(--dh-touch);
  }
}