/* =============================================================================
   Weblance Starter — tokeny motywu (wartości DOMYŚLNE)
   Paleta poniżej jest neutralna. Kolory projektu zmieniaj TUTAJ (albo nadpisz
   w Customizerze / theme.json) — reszta CSS korzysta wyłącznie z tych zmiennych.
   ============================================================================= */

:root {
  /* ===== Font ===== */
  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ===== Typografia =====
     --fs-base = wartość bazowa w px, sterowana jawnie na breakpointach.
     Każdy rozmiar = --fs-base × --f-<token>.
     Współczynniki --f-* to JEDYNE miejsce ręcznej kontroli skalowania:
     na breakpoincie zmieniasz --f-*, a nie sam token.
     (Celowo nie `em` — `em` w custom property rozwiązuje się względem
     font-size elementu, na którym token jest UŻYTY; calc(var(--fs-base)...)
     zawsze odnosi się do fontu bazowego.) */
  --fs-base: clamp(16px, 1.1458vw, 22px); /* ≥1920px: 22px · 1200px: 16px · płynna skala (1.1458vw = 22px @1920) */

  --f-badge:    0.6364;   /* → 14.00px */
  --f-kicker:   1.1364;   /* → 25.00px */
  --f-h3:       1.4545;   /* → 32.00px */
  --f-h3-plus:  1.8182;   /* → 40.00px */
  --f-h2-plus:  2.7273;   /* → 60.00px */
  --f-h2:       3.1818;   /* → 70.00px */
  --f-h1:       4.0000;   /* → 88.00px */
  --f-step-num: 2.8150;   /* → 61.93px */

  /* Micro-UI nie może zejść pod 12px — przy niższych szerokościach token
     siadał do ~10.5px (badge CTA, breadcrumby). 1920px bez zmian (14px). */
  --fs-badge:   max(12px, calc(var(--fs-base) * var(--f-badge)));
  --fs-kicker:  calc(var(--fs-base) * var(--f-kicker));
  --fs-h3:      calc(var(--fs-base) * var(--f-h3));
  --fs-h3-plus: calc(var(--fs-base) * var(--f-h3-plus));
  --fs-h2-plus: calc(var(--fs-base) * var(--f-h2-plus));
  --fs-h2:      calc(var(--fs-base) * var(--f-h2));
  --fs-h1:      calc(var(--fs-base) * var(--f-h1));
  --fs-step-num: calc(var(--fs-base) * var(--f-step-num)); /* numer kroku w kółku */
  --hero-icon:  calc(var(--fs-h1) * 0.8); /* ikony flagi/globusa w hero = 80% H1 */

  /* aliasy kompatybilnosci */
  --fs-sm: var(--fs-badge);
  --fs-lg: var(--fs-kicker);

  /* line-height (jednostkowe — nie skalują się) */
  --lh-heading: 1.0;
  --lh-body: 1.4;

  --fw-h1: var(--fw-medium);
  --fw-h2: var(--fw-medium);
  --fw-h3: var(--fw-medium);
  --fw-h4: var(--fw-medium);
  --fw-h5: var(--fw-medium);
  --fw-h6: var(--fw-medium);

  /* ===== Kolory (paleta) ===== */
  --color-navy: #141417;
  --color-navy-dark: #0b0b0d;
  --color-red: #0a706c;
  --color-white: #ffffff;
  --color-surface: #fbfbfb;
  --color-surface-soft: #fafafa; /* karty uslug/usp/history (Figma #fafafa) */
  --color-line: #dadada; /* pozioma linia naglowka sekcji */
  --color-eyebrow: rgba(0, 0, 0, 0.51); /* kicker na jasnym tle */
  --color-eyebrow-invert: rgba(255, 255, 255, 0.51); /* kicker na ciemnym tle */
  --color-green: #0a706c; /* z Figmy (glif ikony CTA) */

  /* role kolorow */
  --color-bg: var(--color-white);
  --color-bg-dark: var(--color-navy-dark);
  --color-text: var(--color-navy);
  --color-text-rgb: 20, 20, 23;
  --color-text-invert: var(--color-white);
  --color-primary: var(--color-navy);
  --color-accent: var(--color-red);
  --color-accent-rgb: 10, 112, 108;
  --color-on-accent: var(--color-white);
  --color-muted: #5f6672;

  /* ===== Kontener (stały — layout, nie skaluje się z fontem) ===== */
  --container-max: 1600px;
  --container-hero: 1860px;
  --container-narrow: 1000px;
  /* Miara tekstu — optymalna długość wiersza akapitu (~65–75 znaków).
     Płynna, bo liczona z --fs-base: przy każdej szerokości ekranu daje
     podobną liczbę znaków w linii, a nie podobną liczbę pikseli. */
  --f-measure-prose: 35;  /* → 770px przy --fs-base 22px (~70 znaków) */
  --measure-prose: calc(var(--fs-base) * var(--f-measure-prose));
  --space-page: 30px;
  --space-edge: 20px; /* stały odstęp boxów pełnoekranowych (hero/contact/proces) od krawędzi */
  --space-page-fluid: clamp(var(--space-page), 8vw, 200px); /* bezpieczny gutter boczny: treść = ~84vw na laptopie, max 200px */

  /* ===== Odstepy ===== */
  --f-space-2xs:  0.4545;   /* → 10px */
  --f-space-xs:   0.6818;   /* → 15px */
  --f-space-sm:   1.3636;   /* → 30px */
  --f-space-icon: 1.8182;   /* → 40px */
  --f-icon-box:   4.5455;   /* → 100px */
  --f-space-md:   2.1818;   /* → 48px */
  --f-space-lg:   7.2727;   /* → 160px */

  --space-2xs:  calc(var(--fs-base) * var(--f-space-2xs));
  --space-xs:   calc(var(--fs-base) * var(--f-space-xs));
  --space-sm:   calc(var(--fs-base) * var(--f-space-sm));
  --space-icon: calc(var(--fs-base) * var(--f-space-icon));
  --icon-box:   calc(var(--fs-base) * var(--f-icon-box));
  --space-md:   calc(var(--fs-base) * var(--f-space-md));
  --space-lg:   calc(var(--fs-base) * var(--f-space-lg));
  --space-xl: var(--space-lg);
  --space-2xl: var(--space-lg);
  --space-3xl: var(--space-lg);

  /* ===== Zaokraglenia ===== */
  --f-radius-pill:        4.5455;   /* → 100px */
  --f-radius-card:        0.9091;   /* → 20px */
  --f-radius-card-lg:     1.3636;   /* → 30px */
  --f-radius-box:         1.8182;   /* → 40px */
  --f-radius-hero-top:    1.8182;   /* → 40px */
  --f-radius-hero-bottom: 6.8182;   /* → 150px */

  --radius-pill:        calc(var(--fs-base) * var(--f-radius-pill));
  --radius-card:        calc(var(--fs-base) * var(--f-radius-card));
  --radius-card-lg:     calc(var(--fs-base) * var(--f-radius-card-lg));
  --radius-box:         calc(var(--fs-base) * var(--f-radius-box));
  --radius-hero-top:    calc(var(--fs-base) * var(--f-radius-hero-top));
  --radius-hero-bottom: calc(var(--fs-base) * var(--f-radius-hero-bottom));
  --radius-sm: var(--radius-pill);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-card);

  /* ===== Przyciski ===== */
  --f-btn-padding-y:    0.6818;   /* → 15px */
  --f-btn-padding-x:    1.3636;   /* → 30px */
  --f-btn-gap:          0.6818;   /* → 15px */
  --f-btn-border-width: 0.0909;   /* → 2px */
  --f-btn-row-gap:      1.3636;   /* → 30px */
  --f-btn-icon:         2.4091;   /* → 53px */
  --f-header-height:    8.4091;   /* → 185px */

  --btn-padding-y:    calc(var(--fs-base) * var(--f-btn-padding-y));
  --btn-padding-x:    calc(var(--fs-base) * var(--f-btn-padding-x));
  --btn-gap:          calc(var(--fs-base) * var(--f-btn-gap));
  --btn-border-width: calc(var(--fs-base) * var(--f-btn-border-width));
  --btn-row-gap:      calc(var(--fs-base) * var(--f-btn-row-gap));
  --btn-icon:         calc(var(--fs-base) * var(--f-btn-icon));
  --btn-min-h:        0; /* tap target pigułki CTA; ≤768px → 44px */
  --header-height:    calc(var(--fs-base) * var(--f-header-height));

  /* ===== Slider logotypów (marquee) ===== */
  --marquee-duration: 45s; /* czas jednego obiegu połówki tracku */

  /* ===== Karty / kafelki (płynny padding, min 20px) ===== */
  --card-pad-t: clamp(20px, 3.2vw, 50px);  /* góra karty */
  --card-pad-x: clamp(20px, 1.9vw, 30px);  /* boki karty */
  --card-pad-b: clamp(20px, 2.6vw, 40px);  /* dół karty */
  --card-pad: var(--card-pad-t);           /* jednolity (np. kroki procesu) */

  /* ===== Warstwy (z-index) ===== */
  --z-modal: 2000;  /* modal CTA — ponad nagłówkiem (1000) i drawerem menu (1200) */

  /* ===== Modal (okno z formularzem) ===== */
  --modal-max: 640px; /* szerokość okna; niżej pełna szerokość ekranu */
}

/* ===== Breakpointy =====
   Każdy breakpoint jawnie zmniejsza --fs-base ORAZ współczynniki --f-*.
   Rozmiary NIE maleją automatycznie z fontem bazowym — każdy token ma
   własną, jawnie zadaną wartość --f-* na każdym breakpoincie. */

@media (max-width: 1440px) {
  :root {
    --f-badge: 0.6386;  --f-kicker: 1.1171;  --f-h3: 1.4043;
    --f-h3-plus: 1.7295; --f-h2-plus: 2.4786; --f-h2: 2.8638;
    --f-h1: 3.4152;     --f-step-num: 2.6862;

    --f-space-2xs: 0.4762;  --f-space-xs: 0.6667;  --f-space-sm: 1.3333;
    --f-space-icon: 1.8095; --f-icon-box: 4.4762;
    --f-space-md: 2.0543;   --f-space-lg: 6.4481;

    --f-radius-pill: 4.5714; --f-radius-card: 0.9048;
    --f-radius-card-lg: 1.3810; --f-radius-box: 1.8095;
    --f-radius-hero-top: 1.8095; --f-radius-hero-bottom: 6.6667;

    --f-btn-padding-y: 0.6667; --f-btn-padding-x: 1.3333; --f-btn-gap: 0.6667;
    --f-btn-border-width: 0.0952; --f-btn-row-gap: 1.3333;
    --f-btn-icon: 2.3810; --f-header-height: 8.0952;
  }
}

@media (max-width: 1024px) {
  :root {
    --f-badge: 0.6435;  --f-kicker: 1.1065;  --f-h3: 1.3685;
    --f-h3-plus: 1.6555; --f-h2-plus: 2.2550; --f-h2: 2.5805;
    --f-h1: 2.8790;     --f-step-num: 2.5815;

    --f-space-2xs: 0.4500;  --f-space-xs: 0.6500;  --f-space-sm: 1.3000;
    --f-space-icon: 1.7000; --f-icon-box: 4.4000;
    --f-space-md: 1.9430;   --f-space-lg: 5.7035;

    --f-radius-pill: 4.6000; --f-radius-card: 0.9000;
    --f-radius-card-lg: 1.3500; --f-radius-box: 1.8000;
    --f-radius-hero-top: 1.8000; --f-radius-hero-bottom: 6.0000;

    --f-btn-padding-y: 0.6500; --f-btn-padding-x: 1.3000; --f-btn-gap: 0.6500;
    --f-btn-border-width: 0.1000; --f-btn-row-gap: 1.3000;
    --f-btn-icon: 2.3000; --f-header-height: 7.5000;
  }
}

@media (max-width: 768px) {
  :root {
    --f-badge: 0.6600;  --f-kicker: 1.1216;  --f-h3: 1.3721;
    --f-h3-plus: 1.6389; --f-h2-plus: 2.1489; --f-h2: 2.4400;
    --f-h1: 2.5721;     --f-step-num: 2.5621;

    --f-space-2xs: 0.4211;  --f-space-xs: 0.6316;  --f-space-sm: 1.2632;
    --f-space-icon: 1.6842; --f-icon-box: 4.3158;
    --f-space-md: 1.9063;   --f-space-lg: 5.3127;

    --f-radius-pill: 4.6316; --f-radius-card: 0.8947;
    --f-radius-card-lg: 1.3158; --f-radius-box: 1.7895;
    --f-radius-hero-top: 1.7895; --f-radius-hero-bottom: 5.2632;

    --f-btn-padding-y: 0.6316; --f-btn-padding-x: 1.2632; --f-btn-gap: 0.6316;
    --f-btn-border-width: 0.1053; --f-btn-row-gap: 1.2632;
    --f-btn-icon: 2.2105; --f-header-height: 6.8421;

    /* Tap target (WCAG 2.5.8): pigułka CTA rośnie z 38px do 44px. */
    --btn-min-h: 44px;
  }
}

@media (max-width: 480px) {
  :root {
    /* H1 musi zostać NAD H2 — wcześniej --f-h2 (2.2222) > --f-h1 (2.1600)
       dawało przy 480px H2 35.56px > H1 34.56px (odwrócona hierarchia). */
    --f-badge: 0.6756;  --f-kicker: 1.1328;  --f-h3: 1.3667;
    --f-h3-plus: 1.6072; --f-h2-plus: 2.0011; --f-h2: 2.0000;
    --f-h1: 2.2000;     --f-step-num: 2.0000;

    --f-space-2xs: 0.4444;  --f-space-xs: 0.6667;  --f-space-sm: 1.2222;
    --f-space-icon: 1.5556; --f-icon-box: 4.2222;
    --f-space-md: 1.8472;   --f-space-lg: 4.7867;

    --f-radius-pill: 4.6667; --f-radius-card: 0.8889;
    --f-radius-card-lg: 1.2778; --f-radius-box: 1.6667;
    --f-radius-hero-top: 1.6667; --f-radius-hero-bottom: 4.4444;

    --f-btn-padding-y: 0.6111; --f-btn-padding-x: 1.2222; --f-btn-gap: 0.6111;
    --f-btn-border-width: 0.1111; --f-btn-row-gap: 1.2222;
    --f-btn-icon: 2.1111; --f-header-height: 6.1111;
  }
}

@media (max-width: 360px) {
  :root {
    --f-badge: 0.6667;  --f-kicker: 1.1111;  --f-h3: 1.3333;
    --f-h3-plus: 1.5556; --f-h2-plus: 1.8889; --f-h2: 1.6500;
    --f-h1: 1.8500;     --f-step-num: 2.0000;

    --f-space-2xs: 0.4444;  --f-space-xs: 0.6111;  --f-space-sm: 1.1111;
    --f-space-icon: 1.4444; --f-icon-box: 3.8889;
    --f-space-md: 1.7778;   --f-space-lg: 4.4444;

    --f-radius-pill: 4.4444; --f-radius-card: 0.8333;
    --f-radius-card-lg: 1.2222; --f-radius-box: 1.5556;
    --f-radius-hero-top: 1.5556; --f-radius-hero-bottom: 3.8889;

    --f-btn-padding-y: 0.5556; --f-btn-padding-x: 1.1111; --f-btn-gap: 0.5556;
    --f-btn-border-width: 0.1111; --f-btn-row-gap: 1.1111;
    --f-btn-icon: 1.8889; --f-header-height: 5.5556;
  }
}