/* ================================================================
 * Growston NEW — design tokens (wyłącznie z Figmy "Growston NEW")
 * Prefiks --g-* — NIE koliduje ze starymi tokenami (--color-*, --fs-*).
 * Źródło: Figma file MKCcworawve3oTcnVM3Qbn (Navigation 15:631, Hero 15:34)
 * Skala: wartości docelowe = 1920px; poniżej skalują się płynnie (vw),
 *        powyżej 1920px pozostają na docelowym maksimum (clamp).
 * ================================================================ */

:root {
  /* ── Typografia ── */
  --g-font-body: 'Roboto', sans-serif;
  --g-fw-regular: 400;
  --g-fw-medium: 500;

  /* Rozmiary fontów (fluid: docelowe przy 1920px, min. dla czytelności na mobile) */
  --g-fs-h1: clamp(38px, 4.06vw, 78px);   /* H1 - Hero (78px @ 1920) */
  --g-fs-body: clamp(17px, 1.15vw, 22px); /* Kicker / Text / CTA / Menu */
  --g-fs-quote: clamp(15px, 0.94vw, 18px); /* Text/Italic (cytat w karcie) */
  --g-fs-mega: clamp(15px, 0.94vw, 18px);  /* linki/kolumny mega menu */
  --g-fs-h3: clamp(24px, 1.82vw, 35px);    /* H3 — sekcje */
  --g-fs-panel: clamp(28px, 2.19vw, 42px); /* tytuł panela porównania */
  --g-fs-h2: clamp(34px, 3.65vw, 70px);  /* H2 — sekcje (70px @ 1920) */
  --g-fs-team-name: clamp(24px, 1.67vw, 32px); /* imię karty zespołu */
  --g-fs-team-meta: clamp(18px, 1.25vw, 24px); /* rola + bio zespołu */

  /* ── Rozmiary ikon / elementów graficznych (fluid, 60% różnicy desktop↔mobile) ── */
  --g-icon-lg: clamp(40px, 5.21vw, 100px);   /* koło ikony 100px (kafelki/karty) */
  --g-icon-md: clamp(19px, 2.5vw, 48px);     /* marka porównania 48px */
  --g-icon-sm: clamp(18px, 2.34vw, 45px);    /* badge/rating hero 45px */
  --g-icon-avatar: clamp(38px, 4.9vw, 94px); /* avatar w karcie hero 94px */
  --g-icon-bullet: clamp(17px, 2.19vw, 42px);/* ikona bulleta hero 42px */
  --g-icon-check: clamp(14px, 1.88vw, 36px); /* check form_cta 36px */
  --g-icon-host: clamp(26px, 3.33vw, 64px);  /* zdjęcie hosta form_cta 64px */
  --g-icon-star: clamp(12px, 1.56vw, 30px);  /* gwiazdka oceny hero 30px */
  --g-logo-card: clamp(112px, 9.74vw, 187px); /* karta logotypu w sliderze (187px @ 1920) */

  /* ── Kolory ── */
  --g-color-ink: #1A1F3A;        /* tekst na cyjanowym CTA */
  --g-color-purple: #4A148C;     /* przycisk "Let's meet" */
  --g-color-red: #E5484D;          /* znak X w porównaniu */
  --g-color-cyan: #00E5FF;       /* akcent */
  --g-color-white: #FFFFFF;
  --g-color-hero-bg: #1B203F;    /* baza tła hero */
  --g-color-card: #FBFBFB;         /* jasne karty (logo/serwisy) */
  --g-color-heading: #0C365C;      /* nagłówki/teksty na jasnych sekcjach */
  --g-color-line: #DADADA;         /* linia horyzontalna */

  /* Półprzezroczyste biele (karta hero) */
  --g-color-white-23: rgba(255, 255, 255, 0.23);
  --g-color-white-41: rgba(255, 255, 255, 0.72);
  --g-color-white-60: rgba(255, 255, 255, 0.85);
  --g-color-white-62: rgba(255, 255, 255, 0.85);

  /* ── Zaokrąglenia ── */
  --g-radius-pill: 100px;
  --g-radius-card: 30px;
  --g-radius-tile: 20px;
  --g-radius-hero-top: 40px;
  --g-radius-hero-bottom: 150px;

  /* ── Odstępy (fluid: docelowe przy 1920px) ── */
  --g-space-1: clamp(4px, 0.26vw, 5px);
  --g-space-2: clamp(5px, 0.36vw, 7px);
  --g-space-3: clamp(8px, 0.52vw, 10px);
  --g-space-4: clamp(10px, 0.78vw, 15px);
  --g-space-5: clamp(14px, 1.04vw, 20px);
  --g-space-6: clamp(20px, 1.56vw, 30px);
  --g-space-7: clamp(28px, 2.6vw, 50px);
  --g-space-8: clamp(32px, 3.13vw, 60px);
  --g-space-9: clamp(70px, 5.21vw, 100px);  /* mobile = 70% desktop (30% mniejsze) */
  --g-space-10: clamp(105px, 7.81vw, 150px); /* mobile = 70% desktop (30% mniejsze) */
  --g-space-11: clamp(80px, 10.42vw, 200px);
  --g-space-12: clamp(28px, 2.5vw, 48px);
  --g-space-13: clamp(28px, 8.33vw, 160px);

  /* ── Layout — szerokość treści sekcji (JEDEN token) ── */
  --g-content-max: 1920px;

  /* ── Padding poziomy sekcji: content = --g-content-max, BEZ width/max-width ── */
  --g-pad-x: max(var(--g-space-13), calc((100% - var(--g-content-max)) / 2));

  /* ── Szerokość nagłówków (H2/intro) ── */
  --g-heading-max: 1200px; /* deprecated — zamiast tego --g-head-max */

  /* ── Nagłówek sekcji (Default section header / Eyebrow header wrapper) ──
   * Struktura Figmy (identyczna dla WSZYSTKICH sekcji):
   *   Default section header (gap 50px) > Eyebrow header wrapper (gap 5px) > kicker + H2
   * Odstępy: kicker↔H2 = 5px; H2↔text↔linia↔treść = 50px; max-width = 1200px.
   * Kicker/H2/Text używają WYŁĄCZNIE tych tokenów — wspólny wygląd każdego bloku. */
  --g-head-kicker-fs: clamp(17px, 1.15vw, 22px);   /* Kicker — Roboto Medium 22px */
  --g-head-kicker-fw: 500;
  --g-head-kicker-lh: 1;
  --g-head-kicker-color: #00E5FF;

  --g-head-fs: clamp(34px, 3.65vw, 70px);          /* H2 — Roboto Medium 70px */
  --g-head-fw: 500;
  --g-head-lh: 1;
  --g-head-color: #0C365C;
  --g-head-color-dark: #FFFFFF;

  --g-head-text-fs: clamp(17px, 1.15vw, 22px);     /* Text — Roboto Regular 22px */
  --g-head-text-fw: 400;
  --g-head-text-lh: 1.5;
  --g-head-text-color: #1A1F3A;
  --g-head-text-color-dark: #FFFFFF;

  --g-head-max: 1200px;                            /* max-width H2/text */
  --g-head-gap-kicker: clamp(4px, 0.26vw, 5px);    /* kicker ↔ H2 (Figma: gap 5px) */
  --g-head-gap: clamp(28px, 2.6vw, 50px);          /* H2 ↔ text ↔ linia ↔ treść (Figma: gap 50px) */
  --g-head-line-color: #DADADA;                    /* Horizontal line */

  /* ── Header (nakładka na hero) — stałe wysokości (logika JS scroll) ── */
  --g-header-height: 176px;
  --g-header-pad-x: clamp(24px, 3.13vw, 60px);
  --g-pad-x-nav: max(var(--g-space-6), calc((100% - var(--g-content-max) - 2 * var(--g-header-pad-x)) / 2));
  --g-header-pad-y: clamp(12px, 1.56vw, 30px);
  --g-header-height-floating: 72px;  /* kompaktowy stan pływający (po 300px scrolla) */
  --g-header-pad-y-floating: 12px;

  /* ── Hero (fluid; pad-top stały = miejsce na header 176px) ── */
  --g-hero-inset: clamp(15px, 1.56vw, 30px);
  --g-hero-pad-x: clamp(60px, 7.81vw, 150px);
  --g-hero-pad-top: 200px;
  --g-hero-pad-bottom: clamp(60px, 7.81vw, 150px);
  --g-hero-col-gap: clamp(40px, 7.81vw, 150px);
  --g-hero-card-w: 540px;
}