/**
 * MMA Design Tokens — globalne zmienne CSS
 *
 * Plik zatwierdzony 2026-04-25. Źródło prawdy dla całego motywu.
 * Każda zmiana wymaga zbumpowania wersji i aktualizacji MMA-DESIGN-SYSTEM.md.
 *
 * @version 1.0.0
 */

:root {

  /* ─── KOLORY ─────────────────────────────────────────── */

  --mma-yellow:        #fec009;   /* żółty główny — przyciski, bordery, akcenty, separator pod H1 */
  --mma-yellow-hover:  #d4a005;   /* hover wszystkich żółtych elementów */
  --mma-navy:          #1a1a2e;   /* kolor wszystkich tekstów "czarnych" (H1, H2, H3, body, etykiety) */
  --mma-black:         #1a1a1a;   /* kolor nieteknstowych elementów "czarnych" (przyciski, ikony) */
  --mma-muted:         #6b7280;   /* tekst pomocniczy, hinty, podpisy */
  --mma-gray-bg:       #f4f4f4;   /* jedyne dozwolone szare tło sekcji i page-headera */
  --mma-border:        #e5e5e5;   /* bordery kart i pól formularzy */
  --mma-white:         #ffffff;   /* białe tła, tekst na ciemnym tle */

  /* ─── TYPOGRAFIA ─────────────────────────────────────── */

  --mma-font-heading:  'Oswald', sans-serif;        /* H1, H2, H3, przyciski, eyebrow */
  --mma-font-body:     'Inter', sans-serif;         /* body, muted, etykiety, opisy */

  --mma-h1-size:       clamp(32px, 4vw, 48px);
  --mma-h2-size:       clamp(24px, 3vw, 36px);
  --mma-h3-size:       20px;
  --mma-body-size:     16px;
  --mma-muted-size:    14px;
  --mma-btn-size:      16px;
  --mma-eyebrow-size:  12px;

  /* ─── GEOMETRIA ──────────────────────────────────────── */

  --mma-container-max:        1210px;   /* jedyna dozwolona szerokość kontenera */
  --mma-section-padding-y:    80px;     /* padding góra/dół sekcji desktop */
  --mma-section-padding-x:    20px;     /* padding poziomy kontenera */

  /* ─── PRZYCISKI — PILL (layout stron) ───────────────── */

  --mma-btn-radius-pill:      999px;
  --mma-btn-padding-pill:     14px 40px;

  /* ─── PRZYCISKI — ROUNDED (kafelki produktów/szkoleń) ── */

  --mma-btn-radius-rounded:   8px;
  --mma-btn-padding-rounded:  12px 24px;

  /* ─── KARTY / KAFELKI ────────────────────────────────── */

  --mma-card-radius:          8px;
  --mma-card-padding:         32px 24px;
  --mma-card-shadow:          0 2px 16px rgba(0, 0, 0, 0.08);
  --mma-card-shadow-hover:    0 6px 28px rgba(0, 0, 0, 0.14);

  /* ─── PRZEJŚCIA ──────────────────────────────────────── */

  --mma-transition-fast:      150ms ease;
  --mma-transition-normal:    200ms ease;
  --mma-transition-slow:      350ms ease;

  /* ─── CIENIE ─────────────────────────────────────────── */

  --mma-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --mma-shadow-md:   0 2px 16px rgba(0, 0, 0, 0.08);
  --mma-shadow-lg:   0 6px 28px rgba(0, 0, 0, 0.14);
  --mma-shadow-xl:   0 10px 40px rgba(0, 0, 0, 0.18);

}

/* ─── MOBILE OVERRIDES ─────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --mma-section-padding-y:   48px;
    --mma-btn-padding-pill:    12px 24px;
    --mma-btn-padding-rounded: 10px 16px;
  }
}