/* ============================================================
   Brum design system — tokeny
   Źródło prawdy pomiarów: mobbin/tokens.json (ekstrakcja 2026-07-07).
   Wartości przeniesione 1:1; system pracuje w px (bez fluid/vw).
   Font: InterVariable (OFL) jako zamiennik komercyjnego M Saans —
   instancje wag 652/600/456/300 wg mobbin/typography.md.
   ============================================================ */

@font-face {
  font-family: "InterVariable";
  src: url("fonty/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- skala --- */
  --root-font: 16px;            /* stały; layout rośnie paddingami, nie typografią */

  /* --- kolory: landing (JEDEN motyw — biel + ciemna stopka) --- */
  --bg-base: #ffffff;           /* tło całej strony, bez wyjątków między sekcjami */
  --bg-footer: #141414;         /* stopka — jedyny ciemny blok (sticky reveal) */
  --surface-subtle: rgba(64, 64, 64, 0.06);   /* covery kart, hover przycisku wtórnego */
  --surface-tabbar: rgba(64, 64, 64, 0.08);   /* pigułka-kontener tabbara */
  --surface-nav: rgba(237, 237, 237, 0.64);   /* pigułka nawigacji — zawsze z blur(48px) */
  --surface-card: #ffffff;      /* karty opinii; separacja obrysem, nie cieniem */
  --text-primary: #141414;
  --text-secondary: #717171;
  --text-tertiary: #adadad;     /* nieaktywne taby, wygaszone statystyki, tagline stopki */
  --border-subtle: rgba(64, 64, 64, 0.06);    /* obrys 1px kart opinii */
  --border-control: rgba(65, 65, 65, 0.16);   /* obwódka przycisku wtórnego */
  --action-bg: #141414;
  --action-bg-hover: #262626;   /* hover primary — JEDYNA zmiana, bez transformu i cienia */
  --action-fg: #ffffff;
  --action-secondary-bg-hover: rgba(64, 64, 64, 0.06);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #adadad;
  --logo-trust: #adadad;        /* logotypy zaufania — monochromatyczne, nigdy kolorowe */

  /* --- typografia: jedna rodzina, cztery wagi-instancje --- */
  --font: "InterVariable", system-ui, sans-serif;
  --wght-display: 652;          /* WSZYSTKIE nagłówki + duże liczby */
  --wght-ui: 600;               /* przyciski, linki nav, taby, tytuły kart (H4) */
  --wght-body-plus: 456;        /* opisy pod tytułami, cytaty, lead CTA */
  --wght-light: 300;            /* body, listy, menu, nazwiska, legal */
  /* tracking zależy od WAGI, nie rozmiaru (mobbin/typography.md, reguła 2) */
  --ls-display: -0.6px;         /* waga 652 */
  --ls-body-plus: -0.16px;      /* waga 456 */
  --ls-light: 0.2px;            /* wagi 300 i 600 (UI) */

  /* skala desktop (mobile <810 przełącza skokowo, bez clamp) */
  --fs-h1-hero: 80px;   --lh-h1-hero: 80px;    /* mobile: 44/44 */
  --fs-h1: 56px;        --lh-h1: 56px;         /* mobile: 32/36 */
  --fs-nazwa-cta: 32px; --lh-nazwa-cta: 36px;  /* nazwy w mozaice CTA */
  --fs-h3: 24px;        --lh-h3: 30px;
  --fs-h4: 20px;        --lh-h4: 26px;         /* lead hero (w300) i tytuły kart (w600) */
  --fs-body: 16px;      --lh-body: 22px;
  --fs-small: 14px;     --lh-small: 20px;

  /* --- przestrzeń (relacje ważniejsze niż wartości — mobbin/layout.md) --- */
  --section-pad-x: 32px;        /* @1440 → treść sekcji 1376 */
  --section-pad-x-mobile: 20px;
  --section-max: 1376px;
  --content-max: 1280px;        /* karty, product-cover */
  --narrow-max: 960px;          /* łam nagłówków, logotypy */
  --card-gap-2col: 40px;
  --card-gap-3col: 24px;        /* = padding wnętrza kart opinii */
  --ticker-gap: 20px;
  --card-padding: 24px;
  --btn-pad: 11px 16px;         /* wtórny: 10px 16px + border 1px = ta sama wysokość 44px */
  --btn-h: 44px;                /* przyciski NIE skalują się na mobile */
  --footer-pad: 72px 80px 28px;
  --stopka-h: 512px;            /* mobile: 572px */

  /* --- promienie --- */
  --r-pill: 999px;              /* przyciski, pigułka tabbara */
  --r-nav: 30px;                /* pigułka nawigacji ≈ ½ wysokości (28px @mobile/52px) */
  --r-card-lg: 24px;            /* product-cover, karty tickera i opinii, karta menu */
  --r-card-video: 20px;         /* media wewnątrz kart feature */
  --r-card-cover: 16px;         /* szare covery kart feature */

  /* --- ruch (jedyna animacja hover na stronie) --- */
  --transition-btn: color 0.2s ease, background 0.2s ease;
  --blur-nav: 48px;
  --blur-btn-secondary: 40px;

  /* --- cienie: BRAK. Separacja wyłącznie kolorem tła i obrysem 1px. --- */
}

/* ============================================================
   Warstwa aplikacji (kalkulator po wejściu w produkt) — ma dark
   mode, przełączany klasą .app-light/.app-dark na <html>.
   Reguła luster: te same alfy, odwrócona baza; koloru akcentowego
   nie ma także w aplikacji (mobbin/components/app-shell.md).
   ============================================================ */

.app-light {
  color-scheme: light;
  --bg-base: #ffffff;
  --text-primary: #141414;
  --text-secondary: #707070;
  --surface-subtle: rgba(64, 64, 64, 0.08);
  --action-bg: #141414;
  --action-fg: #ffffff;
  --chip-active: #ffffff;
}

.app-dark {
  color-scheme: dark;
  --bg-base: #141414;
  --text-primary: #ffffff;
  --text-secondary: #adadad;
  --surface-subtle: rgba(255, 255, 255, 0.08);
  --action-bg: #ffffff;
  --action-fg: #141414;
  --chip-active: #141414;
}

/* stałe niezależne od motywu aplikacji */
:root {
  --app-navbar-h: 72px;
  --app-filterbar-h: 52px;
  --app-content-max: 1920px;
  --app-search-pill-w: 512px;
  --app-search-pill-h: 48px;    /* radius 24 = ½ wysokości */
  --overlay-glass: rgba(117, 117, 117, 0.48);  /* + blur(24px), oba motywy */
  --search-panel: rgba(38, 38, 38, 0.88);      /* panel wyszukiwarki — ciemny zawsze */
  --modal-backdrop: rgba(0, 0, 0, 0.6);
}