/* =========================================================================
   Barek Ogrodowy — design tokens
   --------------------------------------------------------------------
   Jedyne miejsce gdzie definiujemy wartości stylistyczne. Wszystkie inne
   pliki CSS odwołują się do `var(--barek-*)`. Pełna dokumentacja zasad
   stylu w STYLE.md w katalogu wtyczki.
   ========================================================================= */

:root {
    /* ============================================================
       KOLORY
       ============================================================ */

    /* Pomarańcz — primary CTA, akcenty */
    --barek-orange:       #E8651C;
    --barek-orange-hover: #C8540F;
    --barek-orange-soft:  #FBE4D5;  /* hover backgrounds, focus rings */

    /* Sage zieleń — secondary accent (badges "ogrodowe", success) */
    --barek-green:        #7C8B70;
    --barek-green-soft:   #E5EAE0;

    /* Neutralna paleta */
    --barek-dark:         #11161C;  /* footer bg, główny tekst */
    --barek-text:         #11161C;  /* matchuje dark, dla czytelności */
    --barek-muted:        #6F7670;  /* tekst drugorzędny, lead, label */
    --barek-cream:        #F7F1E6;  /* tło sekcji wyróżnionych */
    --barek-white:        #FFFFFF;

    /* Linie / dividers */
    --barek-line:         rgba(17, 22, 28, 0.12);
    --barek-line-dark:    rgba(247, 241, 230, 0.12); /* na ciemnym tle */

    /* ============================================================
       TYPOGRAFIA — rodziny
       ============================================================ */

    --barek-font-script:  'Pacifico', 'Brush Script MT', cursive;
    --barek-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ============================================================
       TYPOGRAFIA — skala (mobile-first)
       ============================================================ */

    /* Skala po refaktorze (REDESIGN-PLAN.md, Faza 1) — wartości skompresowane
       o ~20 % żeby treść mieściła się na 13-calowych laptopach (1366×768)
       bez tracenia czytelności. */
    --barek-text-xs:    11px;   /* eyebrow, copyright, badge */
    --barek-text-sm:    13px;   /* footer, captions, button labels */
    --barek-text-base:  15px;   /* body, default — DOMINUJĄCA wartość */
    --barek-text-md:    16px;   /* wzmocniony akapit, opis produktu */
    --barek-text-lg:    18px;   /* lead w hero, cytat */
    --barek-text-xl:    20px;   /* subheading, value w karcie, ceny */
    --barek-text-2xl:   24px;   /* H3 sekcji */
    --barek-text-3xl:   30px;   /* H2 sekcji, page headings */
    --barek-text-4xl:   38px;   /* H1 / hero (desktop) */

    /* ============================================================
       SPACING — skala 4px
       ============================================================ */

    --barek-space-1:    4px;
    --barek-space-2:    8px;
    --barek-space-3:    12px;
    --barek-space-4:    16px;
    --barek-space-5:    24px;
    --barek-space-6:    32px;
    --barek-space-7:    48px;
    --barek-space-8:    64px;
    --barek-space-9:    96px;
    --barek-space-10:   128px;

    /* ============================================================
       SECTIONS / CONTAINERS
       ============================================================ */

    /* Section padding (REDESIGN-PLAN.md, Faza 1) — skompresowane
       żeby treść startowała wyżej w viewport */
    --barek-section-py:         56px;  /* desktop */
    --barek-section-py-tablet:  44px;
    --barek-section-py-mobile:  32px;

    /* Containers — wide zawężony do 1240 (1366px laptop fit) */
    --barek-container-narrow:   720px;   /* dokumenty prawne — czytelna miara */
    --barek-container:          1040px;  /* sekcje tekstowe (kontakt, FAQ) */
    --barek-container-wide:     1240px;  /* główne sekcje (hero, product, cart, checkout) */

    --barek-container-px:        32px;  /* desktop */
    --barek-container-px-tablet: 24px;
    --barek-container-px-mobile: 16px;

    /* ============================================================
       BORDER RADIUS
       ============================================================ */

    --barek-radius-sm:    4px;   /* inputy, drobne badge */
    --barek-radius-md:    8px;   /* karty, kontenery */
    --barek-radius-lg:    16px;  /* hero card, modale */
    --barek-radius-pill:  999px; /* primary CTA, chips */

    /* ============================================================
       NAGŁÓWEK STRONY
       ============================================================ */

    --barek-header-bg:              #ffffff;
    --barek-header-bg-90:           rgba(255, 255, 255, 0.92);
    /* Header (REDESIGN-PLAN.md, Faza 1) — niższy header = więcej miejsca pod nim */
    --barek-header-height:          64px;
    --barek-header-height-scrolled: 52px;
    /* Bardzo wysoki z-index — header i drawer muszą bić wszystko z motywu Divi
       (Divi wewnętrznie używa 99999 dla swoich overlayów). */
    --barek-header-z:               999999;

    /* ============================================================
       SHADOWS
       ============================================================ */

    --barek-shadow-sm: 0 2px 12px rgba(17, 22, 28, 0.06);
    --barek-shadow-md: 0 8px 32px rgba(17, 22, 28, 0.10);
    --barek-shadow-lg: 0 16px 48px rgba(17, 22, 28, 0.14);

    /* ============================================================
       ANIMACJE
       ============================================================ */

    --barek-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --barek-duration:      280ms;
    --barek-duration-fast: 180ms;
}