/* QAH Design System — design tokens (kolory, typografia, spacing, shadows)
   ⚠️  Ręcznie pisany plik — NIE jest output z `npm run build:css` (P2-DS-4).
       Świadomy wyjątek od konwencji `dist/` = generated; udokumentowany w
       CLAUDE.md sekcja Frontend i docs/active/qah-design-system/zadania.md.
   Źródło: docs/design-system/tokens.css (2026-04-24)
   Tylko zmienne — nie stylujemy elementów globalnych (reset/body/h1 itd. w qah-overrides.css).

   Konwencja nazewnictwa custom properties:
   - --brand-{50..700}        — paleta brand (orange)
   - --brand-500-rgb          — RGB składowe dla rgba()
   - --brand-tint-{bg,fg}     — soft tint dla badges/pills
   - --neutral-{0..900}       — Apple-style gray scale
   - --fg-{1..3}, --fg-brand, --fg-on-brand, --fg-inverse — semantic text
   - --bg-{page,alt,subtle,dark,darker}                  — semantic surfaces
   - --border-{1,2}                                      — divider tokens
   - --success/--warning/--error/--info                  — status colors
   - --shadow-{xs..xl}, --shadow-brand-{sm,md,lg}        — elevations
   - --radius-{sm,md,lg,xl,2xl,3xl,pill}                 — corner radius
   - --space-{1..12}                                     — 4px-base spacing
   - --t-{hero..eyebrow}                                 — typography (in design-system, nieużywane w produkcji — usunięte z tego pliku)
   - --bs-* (poniżej)                                    — Bootstrap 5 aliasy mapujące BS→QAH
*/

/* Font Inter ładowany w admin/inc/header.php przez <link rel="preconnect"> + <link rel="stylesheet">
   (NIE @import — render-blocking ukryty wewnątrz CSS dodaje 150-300ms na zimno) */

:root {
  /* ─── Brand (orange) ──────────────────────────────── */
  --brand-50:  #FFF4EE;
  --brand-100: #FFE4D4;
  --brand-200: #FFB599;
  --brand-300: #FF8F66;
  --brand-400: #F7713B;
  --brand-500: #F35926;   /* ★ primary */
  --brand-500-rgb: 243, 89, 38;   /* dla rgba(var(--brand-500-rgb), alpha) */
  --brand-600: #C44518;
  --brand-700: #8A2E10;

  /* Legacy brand tint used in badges / soft pills */
  --brand-tint-bg:  #FFF1EB;
  --brand-tint-fg:  #A83413;

  /* ─── Neutral (Apple-style) ───────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FBFBFD;
  --neutral-100:  #F5F5F7;
  --neutral-200:  #E5E5EA;
  --neutral-250:  #E8E8ED;   /* card borders */
  --neutral-300:  #D2D2D7;
  --neutral-400:  #AEAEB2;
  --neutral-500:  #86868B;
  --neutral-600:  #6E6E73;
  --neutral-700:  #48484A;
  --neutral-800:  #1D1D1F;
  --neutral-900:  #0A0A0C;

  /* ─── Semantic roles ──────────────────────────────── */
  --fg-1: var(--neutral-800);    /* primary text */
  --fg-2: var(--neutral-600);    /* secondary text */
  --fg-3: var(--neutral-500);    /* muted / meta */
  --fg-inverse: var(--neutral-100);
  --fg-brand: var(--brand-500);
  --fg-on-brand: #FFFFFF;

  --bg-page:     #FFFFFF;
  --bg-alt:      var(--neutral-50);    /* alternating section bg */
  --bg-subtle:   var(--neutral-100);   /* cards, chips */
  --bg-dark:     var(--neutral-800);   /* CTA, stats, footer */
  --bg-darker:   #0A0A0C;

  --border-1: var(--neutral-250);
  --border-2: var(--neutral-300);

  --success: #30A46C;
  --warning: #F0A500;
  --error:   #D93025;
  --info:    #0071E3;

  /* ─── Elevation / shadow ──────────────────────────── */
  --shadow-xs:       0 1px 0 0 rgba(0,0,0,0.04);
  --shadow-sm:       0 4px 16px 0 rgba(0,0,0,0.04);   /* card base */
  --shadow-md:       0 8px 16px rgba(0,0,0,0.08);
  --shadow-lg:       0 16px 32px rgba(0,0,0,0.12);
  --shadow-xl:       0 24px 48px rgba(0,0,0,0.16);
  --shadow-brand-sm: 0 8px 20px -4px rgba(var(--brand-500-rgb), 0.30);
  --shadow-brand-md: 0 12px 28px -6px rgba(var(--brand-500-rgb), 0.35);
  --shadow-brand-lg: 0 20px 40px -8px rgba(var(--brand-500-rgb), 0.40);

  /* ─── Radius ──────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 9999px;

  /* ─── Spacing (4px base unit) ─────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  120px;

  /* ─── Typography ──────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Usunięto --t-hero..--t-eyebrow (10 zmiennych) — nieużywane w produkcji,
     prototyp w docs/design-system/tokens.css zachowuje pełen zestaw. */
}

/* ─── Bootstrap 5 aliasy mapujące tokeny QAH na zmienne BS ───────────────────
   Tu mieszka SAM mapping (tokens layer); aplikacja do komponentów (.btn-primary,
   .text-primary itd.) zostaje w qah-overrides.css. */
:root {
  --bs-primary:        var(--brand-500);
  --bs-primary-rgb:    var(--brand-500-rgb);
  --bs-primary-bg-subtle: var(--brand-tint-bg);
  --bs-primary-text:   var(--brand-600);
  --bs-primary-border-subtle: var(--brand-200);
  --bs-link-color:     var(--brand-500);
  --bs-link-hover-color: var(--brand-600);
  --bs-link-color-rgb: var(--brand-500-rgb);
  --bs-link-hover-color-rgb: 196, 69, 24;
  --bs-border-radius:  var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-danger:         var(--error);
  --bs-danger-rgb:     217, 48, 37;
  --bs-success:        var(--success);
  --bs-success-rgb:    48, 164, 108;
  --bs-warning:        var(--warning);
  --bs-warning-rgb:    240, 165, 0;
  --bs-info:           var(--info);
  --bs-info-rgb:       0, 113, 227;
  --bs-body-color:     var(--fg-1);
  --bs-body-bg:        var(--bg-page);
  --bs-secondary-color: var(--fg-2);
  --bs-tertiary-color: var(--fg-3);
  --bs-border-color:   var(--border-1);
}