:root {
  /* ===== Font ===== */
  --font-base: 'Clash Display', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ===== Fluid typografia (min 360px -> max 1920px) ===== */
  --fs-base:    clamp(18px, 17.08px + 0.26vw, 22px);
  --fs-badge:   clamp(12px, 11.54px + 0.13vw, 14px);
  --fs-kicker:  clamp(20px, 18.85px + 0.32vw, 25px);
  --fs-h3:      clamp(24px, 22.15px + 0.51vw, 32px);
  --fs-h3-plus: clamp(28px, 25.23px + 0.77vw, 40px);
  --fs-h2-plus: clamp(34px, 28.00px + 1.67vw, 60px);
  --fs-h2:      clamp(38px, 30.62px + 2.05vw, 70px);
  --fs-h1:      clamp(44px, 33.85px + 2.82vw, 88px);

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

  /* line-height */
  --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: #0c365c;
  --color-navy-dark: #001324;
  --color-red: #c40009;
  --color-white: #ffffff;
  --color-surface: #fbfbfb;
  --color-green: #00d756; /* 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: 12, 54, 92;
  --color-text-invert: var(--color-white);
  --color-primary: var(--color-navy);
  --color-accent: var(--color-red);
  --color-accent-rgb: 196, 0, 9;
  --color-on-accent: var(--color-white);
  --color-muted: #5f6672;

  /* ===== Kontener - gutter przez padding ===== */
  --container-max: 1600px;
  --container-hero: 1860px;
  --container-narrow: 1000px;
  --space-page: 30px;

  /* ===== Odstepy ===== */
  --space-2xs: 10px;
  --space-xs: 15px;
  --space-sm: 30px;
  --space-icon: 40px;
  --icon-box: 100px;
  --space-md: clamp(32px, 28.31px + 1.03vw, 48px);
  --space-lg: clamp(80px, 61.54px + 5.13vw, 160px);
  --space-xl: var(--space-lg);
  --space-2xl: var(--space-lg);
  --space-3xl: var(--space-lg);

  /* ===== Zaokraglenia ===== */
  --radius-pill: 100px;
  --radius-card: 30px;
  --radius-hero-top: 40px;
  --radius-hero-bottom: 150px;
  --radius-sm: var(--radius-pill);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-card);

  /* ===== Przyciski ===== */
  --btn-padding-y: 15px;
  --btn-padding-x: 30px;
  --btn-gap: 15px;
  --btn-border-width: 2px;
  --btn-row-gap: 30px;
  --btn-icon: 53px;
  --header-height: 128px;
}