:root {
  --color-primary: #c6a325;
  --color-secondary: #343741;
  --color-text-primary: #30323c;
  --color-text-secondary: #6e6e6e;
  --color-bg: #ffffff;
  --color-bg-secondary: #f4f5f7;
  --color-bg-gold-tint: rgba(185, 149, 33, 0.1);
  --color-border: #e3e5e9;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-heading-hero: 'Raleway', sans-serif;
  --font-size-mega-title: clamp(2.5rem, 1.969rem + 2.265vw, 4.688rem);
  --font-size-heading: clamp(1.75rem, 1.416rem + 1.424vw, 3.125rem);
  --font-size-page-title: clamp(1.625rem, 1.473rem + 0.6472vw, 2.25rem);
  --font-size-page-subtitle: clamp(1.125rem, 0.9733rem + 0.6472vw, 1.75rem);
  --font-size-element-title: 1.25rem;
  --font-size-body-mobile: clamp(1rem, 0.762rem + 1.018vw, 1.25rem);
  --font-size-body-sm-mobile: clamp(0.875rem, 0.756rem + 0.509vw, 1rem);
  --font-size-text: 1rem;
  --font-size-small: 0.75rem;
  --button-m-font-size: 1.0625rem;
  --button-m-padding-y: 25px;
  --button-m-padding-x: 28px;
  --button-l-font-size: 1.25rem;
  --button-l-padding-y: 30px;
  --button-l-padding-x: 30px;
  --button-s-font-size: 0.875rem;
  --button-s-padding-y: 20px;
  --button-s-padding-x: 20px;
  --section-padding-y: clamp(3.5rem, 2.529rem + 4.142vw, 7.5rem);
  --container-max: 1680px;
  --container-padding-x: clamp(1.25rem, -0.267rem + 6.472vw, 7.5rem);
  /* Skala siatki na ekranach od 1920px wzwyz (klient 2026-09-16):
     kolumna tresci i pasy sa o 15% wezsze niz w projekcie. Jedna
     liczba steruje calym ukladem (0.8 = minus 20%, 0.9 = minus 10%).
     Uzyta w bloku ultra-wide na koncu main.css. */
  --skala-siatki: 0.85;
  /* Docelowa szerokosc logo w tej skali. Projekt ma 193x70, wiec
     wysokosc liczy sie z proporcji i znak nie jest znieksztalcony. */
  --szerokosc-logo: 150px;
  /* Krawedz kolumny tresci. Naglowek, okruszki i stopka licuja z nia
     na kazdej szerokosci ekranu: kontener stoi na max-width i jest
     wysrodkowany, wiec jego tresc zaczyna sie na
     (100% - container-max) / 2, a na waskich ekranach na wlasnym
     paddingu. Procent liczy sie od bloku zawierajacego element,
     ktory tej zmiennej uzywa, wiec pasuje tylko do paddingu. */
  --wciecie-tresci: max(
    var(--container-padding-x),
    calc((100% - var(--container-max)) / 2)
  );
  --radius-card: 56px;
  --radius-inner: 40px;
  --radius-button: 20px;
  --shadow-1: 0 6px 24px rgba(0, 0, 0, 0.1);
  --shadow-2: 0 6px 12px rgba(0, 0, 0, 0.1);
}