/*
 * Design tokens — Słomiany Dom (`--sd-*`)
 * Ładowane przed `style.css` (dependency w functions.php).
 * Zob. docs/2026-04-17-ui-consistency-v3.md
 */
/* =============================================================
   DESIGN TOKENS — system `--sd-*`
   ============================================================= */
:root {
  /* ── Kolory marki ──────────────────────────────── */
  --sd-color-green-dark:   #2a7829;
  --sd-color-green:        #2f7c29;
  --sd-color-green-mid:    #3e9e1a;
  --sd-color-green-light:  #6cba1c;   /* WCAG-safe accent (np. nagłówki w ciemnej stopce) */
  --sd-color-green-bright: #76C736;   /* legacy bright accent (linki :hover, podkreślenia) */
  --sd-color-green-hover:  #1f5e1f;
  --sd-color-sand:         #F5ECD7;
  --sd-color-warm-brown:   #7E6F4F;
  --sd-color-ink:          #171F24;
  --sd-color-ink-muted:    #667A89;
  /* Lead pod H1 w .offer-hero / .sd-subpage-hero — ciemniejszy niż ink-muted (kontrast na jasnym tle). */
  --sd-hero-lead-ink:      rgba(23, 31, 36, 0.94);
  --sd-color-text:         #131d15;
  --sd-color-muted:        rgba(19, 29, 21, 0.7);
  --sd-color-surface:      #ffffff;
  --sd-color-surface-soft: #f4f4f3;
  --sd-color-surface-alt:  #f8f9fa;
  --sd-color-border:       #E5E5E5;
  --sd-color-border-light: #F1F3F4;
  --sd-color-white:        #ffffff;

  /* ── Typografia ────────────────────────────────── */
  --sd-font-base: 'Geomanist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --sd-text-xs:   0.75rem;
  --sd-text-sm:   0.875rem;
  --sd-text-base: 1rem;
  --sd-text-lg:   1.125rem;
  --sd-text-xl:   1.25rem;
  /* H2 — jak refresh.slomianydom.eu: 45/50 desktop, 30/40 od max-width 998px */
  --sd-heading-h2-weight: 400;
  --sd-heading-h2-color: #18242d;
  --sd-heading-h2-fs-desktop: 2.8125rem;   /* 45px */
  --sd-heading-h2-lh-desktop: 3.125rem;  /* 50px */
  --sd-heading-h2-fs-mobile: 1.875rem;   /* 30px */
  --sd-heading-h2-lh-mobile: 2.5rem;     /* 40px */

  /* Hero slider (klasyczny home-slider) — wartości jak staging refresh */
  --sd-hero-slider-line1-fs: 7.5rem;       /* 120px */
  --sd-hero-slider-line1-lh: 7.5rem;
  --sd-hero-slider-line2-fs: 3.75rem;      /* 60px */
  --sd-hero-slider-line2-lh: 4.25rem;      /* 68px */
  --sd-hero-slider-line1-fs-mobile: 4.125rem;  /* 66px */
  --sd-hero-slider-line1-lh-mobile: 5rem;    /* 80px */
  --sd-hero-slider-line2-fs-mobile: 1.5625rem; /* 25px */
  --sd-hero-slider-line2-lh-mobile: 2.0625rem; /* 33px */

  /* Slajdy .sd-hero-modern / .sd-hero-photo — typografia z jednego miejsca */
  --sd-hero-modern-h1-clamp: clamp(1.45rem, 4.35vw, 3.35rem);
  --sd-hero-modern-sub-clamp: clamp(0.88rem, 1.45vw, 1.12rem);
  --sd-hero-photo-h1-clamp-lg: clamp(1.35rem, 5.2vw, 2.75rem);
  --sd-hero-photo-h1-clamp-sm: clamp(1.15rem, 6.7vw, 1.85rem);
  --sd-hero-photo-sub-clamp-sm: clamp(0.8rem, 3.45vw, 0.96rem);

  --sd-text-2xl:  clamp(1.875rem, 2.8vw, 2.8125rem); /* skala zbliżona do H2 refresh (30–45px) */
  --sd-text-3xl:  clamp(2rem, 4.5vw, 2.75rem);
  --sd-text-4xl:  clamp(2rem, 4vw, 3rem);          /* domyślny H1 */

  /* ── Spacing ───────────────────────────────────── */
  --sd-space-2xs: 0.375rem;
  --sd-space-xs:  0.625rem;
  --sd-space-sm:  0.875rem;
  --sd-space-md:  1.25rem;
  --sd-space-lg:  1.75rem;
  --sd-space-xl:  2.5rem;
  --sd-space-section:    clamp(4.5rem, 8vw, 7.5rem);
  --sd-space-section-sm: clamp(3rem, 5vw, 5rem);

  /* Rytm sekcji — jeden zestaw tokenów zamiast rozproszonych px/rem (mniej konfliktów z .py-5 / hero) */
  --sd-section-offset-below-header: 4.5rem; /* ~72px: pierwsza sekcja pod fixed navbar */
  --sd-header-logo-max-height: 72px; /* < lg — kompakt pod paskiem mobilnym */
  --sd-header-logo-max-height-lg: 112px; /* ≥ lg — pełniejsze logo (picture desktop) */
  --sd-section-stack-tight: clamp(0.35rem, 1.2vw, 0.85rem); /* wąski odstęp pod hero (np. zamówienie grupowe) */

  /* Pionowy odstęp sekcji — skok co breakpoint (ustawiane na `#main-content > section` jako `--sd-section-y-use`) */
  --sd-section-y-xs: clamp(0.95rem, 0.42rem + 2.5vw, 1.35rem);
  --sd-section-y-sm: clamp(1.05rem, 0.48rem + 2.35vw, 1.55rem);
  --sd-section-y-md: clamp(1.25rem, 0.62rem + 2.1vw, 2.05rem);
  --sd-section-y-lg: clamp(1.55rem, 0.78rem + 1.85vw, 2.85rem);
  --sd-section-y-xl: clamp(1.85rem, 0.95rem + 1.65vw, 4rem);

  /* Kompatybilność wsteczna (stare selektory / dokumentacja) */
  --sd-section-block-padding-y: var(--sd-section-y-xl);
  --sd-section-block-padding-y-mobile: var(--sd-section-y-sm);
  --sd-hero-padding-y: clamp(2rem, 4vw, 3.75rem);
  --sd-hero-padding-y-mobile: clamp(1.35rem, 3.5vw, 1.85rem);
  --sd-section-heading-margin-bottom: var(--sd-space-xl); /* odstęp pod tytułem sekcji (~2rem) */
  --sd-subpage-hero-margin-top: 3.5rem; /* 56px — hero pod fixed layout (gdy brak breadcrumbs nad <main>) */
  --sd-subpage-hero-margin-top-md: 3.125rem; /* 50px @ max 1200px */
  --sd-subpage-hero-margin-top-sm: 2.625rem; /* 42px @ max 767px */
  /* Odstęp breadcrumbs → nagłówek podstrony (H1 w hero): większy na szerokim desktopie */
  --sd-breadcrumb-hero-gap: clamp(0.5rem, 1.8vw, 1.25rem); /* legacy / wąskie miejsca */
  --sd-subpage-hero-after-breadcrumb-lg: clamp(2rem, 2.6vw, 2.875rem); /* ~32–46px — desktop */
  --sd-subpage-hero-after-breadcrumb-md: clamp(1.5rem, 2vw, 2.125rem); /* tablet / mały desktop */
  --sd-subpage-hero-after-breadcrumb-xs: 1.5rem; /* mobile */
  --sd-hero-cta-row-margin-top: var(--sd-space-xl);

  /* ── Promień / Cień / Ease / Layout ───────────── */
  --sd-radius:     18px;
  --sd-radius-sm:  12px;
  --sd-radius-card: 0px;   /* legacy: wartość z obecnego designu */
  --sd-radius-btn:  0;    /* kanoniczny kształt: kanciasty (bez zaokrągleń) dla wszystkich CTA i przycisków formularzy */
  --sd-radius-btn-compact: 0; /* dla małych kontrolek — utrzymujemy spójność kanciasto */
  --sd-shadow-soft:  0 12px 30px rgba(15, 35, 22, 0.08);
  --sd-shadow-hover: 0 18px 45px rgba(15, 35, 22, 0.14);
  --sd-ease:      0.22s ease;
  --sd-ease-slow: 0.4s ease;
  --sd-maxw:      1240px;
  /* Gutter siatki w sekcjach `<main>` — responsywny (mobile-first), używany jako `--bs-gutter-x` */
  --sd-section-container-gutter-x: clamp(0.75rem, 3.5vw + 0.25rem, 1.75rem);
  --sd-btn-height: 46px;

  /* ── Top CTA bar ──────────────────────────────── */
  --sd-top-cta-height:        56px;
  --sd-top-cta-height-mobile: 52px;

  /* Stopka — tekst drugorzędny na jasnym tle (WCAG kontrast względem --sd-color-surface-alt) */
  --sd-color-footer-muted: #4a5c68;
  /* Dolny pasek mobilny (scroll-padding, padding treści) — zsynchronizuj z `.mobile-bottom-bar` */
  --sd-mobile-bottom-bar-height: calc(64px + env(safe-area-inset-bottom, 0px));
  /* Hero strona główna: blok tekstu/CTA nad fixed bottom bar (bez nakładania na pasek) */
  --sd-home-hero-stack-above-mobile-bar: calc(var(--sd-mobile-bottom-bar-height) + 1.125rem);

  /* Nadpisanie Bootstrap font-family tokenów — żeby tooltips/popovers/modalne
     też używały Geomanist (Bootstrap resetuje font w tych komponentach). */
  --bs-font-sans-serif:   var(--sd-font-base);
  --bs-body-font-family:  var(--sd-font-base);
}