/* ==========================================================================
   Tokeny kolorów i typografii — paleta fioletowo-szara
   Kontrasty dobrane pod WCAG 2.2 AA (min. 4.5:1 tekst, 3:1 elementy duże/UI)
   ========================================================================== */

:root {
  /* Fiolet — kolor marki */
  --color-purple-50:  #f3f1fb;
  --color-purple-100: #e4e0f7;
  --color-purple-300: #a99fe0;
  --color-purple-500: #6f5fc4;   /* akcent podstawowy — kontrast 4.5:1 na bieli */
  --color-purple-600: #5a4aa8;
  --color-purple-700: #463a86;
  --color-purple-900: #241f47;

  /* Szarości — tło, tekst, obramowania */
  --color-gray-50:  #f7f7f8;
  --color-gray-100: #eceef0;
  --color-gray-200: #dcdfe3;
  --color-gray-400: #9298a1;
  --color-gray-600: #5c626b;
  --color-gray-800: #33373d;
  --color-gray-900: #1b1d20;

  /* Semantyka */
  --color-danger-bg: #fceceb;
  --color-danger-text: #8a2a1e;   /* kontrast na --color-danger-bg > 7:1 */
  --color-danger-border: #d8483a;

  --color-success-bg: #eaf5ee;
  --color-success-text: #1e5a37;

  /* Role funkcjonalne */
  --clr-bg: #ffffff;
  --clr-bg-alt: var(--color-gray-50);
  --clr-text: var(--color-gray-900);
  --clr-text-muted: var(--color-gray-600);
  --clr-accent: var(--color-purple-600);
  --clr-accent-hover: var(--color-purple-700);
  --clr-on-accent: #ffffff;
  --clr-border: var(--color-gray-200);
  --clr-border-strong: #737982;
  --clr-focus: #1454d6;           /* niebieski, wysoki kontrast, niezależny od fioletu marki */

  /* Typografia */
  --font-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Outfit", var(--font-base);   /* szeroki, geometryczny krój — zgodny z brandingiem */
  --font-size-base: 1.0625rem;    /* 17px — powyżej minimalnego 16px */
  --line-height-base: 1.6;

  /* Odstępy */
  --radius: 8px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
}

/* Tryb ciemny — zachowanie kontrastów AA */
@media (prefers-color-scheme: dark) {
  :root {
    --clr-bg: #17181c;
    --clr-bg-alt: #1f2126;
    --clr-text: #f2f2f4;
    --clr-text-muted: #b7bac1;
    --clr-accent: var(--color-purple-300);
    --clr-on-accent: #1b1030;
    --clr-border: #33363d;
    --clr-border-strong: var(--color-gray-400);
    --clr-focus: #6ea8ff;
  }
}

/* ==========================================================================
   Fokus — WYMAGANE 2.4.11/2.4.13 WCAG 2.2: widoczny, niezasłonięty, min. kontrast 3:1
   Nigdy nie usuwamy outline bez zastąpienia go widoczną alternatywą.
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--clr-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Rozmiar celu dotykowego min. 24×24px — kryterium 2.5.8 WCAG 2.2 */
a, button, input[type="checkbox"], input[type="radio"], .ld-target {
  min-height: 24px;
  min-width: 24px;
}