/* =========================================================================
   LBEA — tokeny projektu
   Źródła: dokument 06 (kolory, typografia, siatka, komponenty), dokument 05 (ruch, punkt 5.2).
   Każda wartość jest zmienną, więc strojenie po prezentacji to zmiana liczby, nie kodu.
   ========================================================================= */

:root {
  /* --- Kolory (06, punkt 6.1.2) --- */
  --c-orange: #EF7F1B;        /* akcent: tła przycisków, ikony, liczniki na ciemnym */
  --c-orange-deep: #D96F10;   /* hover przycisków; pomarańczowy TEKST na jasnym tle, tylko duży */
  /* pomarańczowy mały tekst (numery, etykiety) — dodany w mockupie, żeby spełnić WCAG AA 4,5:1
     na bieli i kremie (#D96F10 ma na bieli tylko 3,4:1) */
  --c-orange-text: #AD560B;
  --c-orange-soft: #FDEBDC;   /* tła ikon w kołach, pigułki, kształty dekoracyjne */
  --c-orange-print: #DF8940;  /* odcień drukowany z notesu (marquee w wariancie B) */
  --c-black: #2B2A28;         /* ciepła czerń z logo: nagłówki, tekst na pomarańczu */
  --c-ink: #1D1C1A;           /* ciemne pasy i stopka */
  --c-text: #4A4744;          /* akapity */
  /* metadane, podpisy. Dokument 06 podaje #807B74 (4,2:1 na bieli, 3,7:1 na piaskowym tle) —
     przyciemnione do #706B64, żeby drobne podpisy spełniały WCAG AA (4,6:1 na piaskowym, 5,3:1 na bieli) */
  --c-muted: #706B64;
  --c-white: #FFFFFF;
  --c-cream: #FAF5EE;         /* tło sekcji wyróżnionych */
  --c-sand: #F3EFE8;          /* tło kart na bieli, pola nieaktywne */
  --c-line: #E6E1D9;          /* obramowania i linie */
  --c-dots: #E9E9E8;          /* kropki z notesu */
  --c-success: #1E8E5A;
  --c-error: #D1433B;
  --c-navy: #14213A;          /* alternatywa dla ciemnego pasa */

  /* Przełącznik ciemnych sekcji (pas „O nas”, stopka): var(--c-ink) albo var(--c-navy). */
  --c-dark: var(--c-ink);

  /* Znaczniki „zawarte w pakiecie”. Dokument 06 przewiduje zieleń (--c-success); w mockupie domyślnie
     pomarańcz, żeby nie wprowadzać trzeciego koloru akcentu. Powrót do zieleni: var(--c-success). */
  --c-check: var(--c-orange-deep);

  --c-btn-dark-hover: #3A3835;

  /* --- Typografia (06, punkt 6.2) — rozmiary płynne między telefonem (390 px) a desktopem (1440 px) --- */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* H1 tylko w hero: na desktopie najwyżej 48 px — nagłówek mieści się w trzech liniach (od 1280 px szerokości)
     i kończy się w bezpiecznej odległości od zdjęcia */
  --fs-h1: clamp(36px, calc(28px + 2vw), 48px);
  --fs-h2: clamp(30px, calc(24.06px + 1.524vw), 46px);
  --fs-h3: clamp(20px, calc(18.51px + 0.381vw), 24px);
  --fs-h4: clamp(17px, calc(16.26px + 0.19vw), 19px);
  --fs-label: clamp(13px, calc(12.63px + 0.095vw), 14px);
  --fs-lead: clamp(18px, calc(17.26px + 0.19vw), 20px);
  --fs-body: clamp(16px, calc(15.63px + 0.095vw), 17px);
  --fs-small: 14px;
  --fs-counter: clamp(40px, calc(34.06px + 1.524vw), 56px);
  --fs-price: clamp(40px, calc(37.03px + 0.762vw), 48px);

  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-h4: 1.35;
  --lh-lead: 1.6;
  --lh-body: 1.7;

  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-label: 0.08em;

  /* --- Siatka i odstępy (06, punkt 6.3) --- */
  --container: 1300px;
  --gutter: 70px;
  --gap: 24px;
  --section-y: 120px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 120px;
  /* Elementy „wychodzące” poza kontener (zdjęcie hero, karuzela opinii) — maksymalnie 160 px. */
  --bleed-max: 160px;

  /* --- Promienie --- */
  --r-card: 20px;
  --r-btn: 12px;
  --r-field: 12px;
  --r-pill: 999px;
  --r-photo: 20px;
  --r-band: 32px;
  --r-thumb: 12px;
  --r-infobox: 16px;

  /* --- Cienie (tylko miękkie i ciepłe) --- */
  --shadow-soft: 0 24px 60px -36px rgba(43, 42, 40, 0.28);
  --shadow-hover: 0 32px 70px -36px rgba(43, 42, 40, 0.36);
  --shadow-float: 0 18px 50px -24px rgba(43, 42, 40, 0.30);

  /* --- Ruch (05, punkt 5.2) --- */
  --t-fast: 240ms;
  --t-base: 420ms;
  --t-slow: 400ms;
  --t-reveal: 0.9s;
  --t-image: 1.5s;
  --e-ui: cubic-bezier(0.65, 0, 0.35, 1);   /* łagodne przyspieszenie i hamowanie (easeInOutCubic) */
  --e-image: cubic-bezier(0.25, 0.8, 0.25, 1);
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Nawigacja --- */
  --nav-h: 88px;
  --nav-h-scrolled: 72px;
  --logo-h: 44px;

  /* --- Kolory logo w sprite (dziedziczone przez <use>) --- */
  --logo-sygnet: var(--c-orange);
  --logo-text: var(--c-black);
}

@media (min-width: 1100px) {
  :root { --fs-h1: clamp(40px, min(3.2vw, 6svh), 48px); }
}

@media (max-width: 1023px) {
  :root {
    --gutter: 40px;
    --section-y: 96px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --gap: 16px;
    --section-y: 72px;
    --nav-h: 64px;
    --nav-h-scrolled: 64px;
    --logo-h: 36px;
  }
}