/*
 * Design tokens — Rozumiem Biznes
 * UWAGA: wartości kolorów i typografii odczytane ze screenów z Figmy (2026-08-20),
 * bo konektor Figmy nie był dostępny. Do zweryfikowania z plikiem źródłowym.
 */

:root {
	/* ============= Kolory: Navy (granat marki) ============= */
	--rb-navy-50:  #eef2f8;
	--rb-navy-100: #d6dfee;
	--rb-navy-200: #adbfdd;
	--rb-navy-300: #7d97c4;
	--rb-navy-400: #4e6da6;
	--rb-navy-500: #2f5088;
	--rb-navy-600: #244071;
	--rb-navy-700: #1d3763;
	--rb-navy-800: #1b3a64;
	--rb-navy-900: #16305a;  /* podstawowy granat nagłówków */
	--rb-navy-950: #0f2340;

	/* ============= Kolory: Orange (akcent marki) ============= */
	--rb-orange-50:  #fef4ed;
	--rb-orange-100: #fde4d3;
	--rb-orange-200: #fbc7a6;
	--rb-orange-300: #f8a670;
	--rb-orange-400: #f58c47;
	--rb-orange-500: #f07c32;  /* główny pomarańcz — przyciski, akcenty */
	--rb-orange-600: #e06a1f;
	--rb-orange-700: #bb5418;
	--rb-orange-800: #94431a;

	/* ============= Neutralne ============= */
	--rb-gray-50:  #fafafa;
	--rb-gray-100: #f4f5f7;
	--rb-gray-200: #e6e8ec;
	--rb-gray-300: #d2d6dd;
	--rb-gray-400: #a3aab6;
	--rb-gray-500: #6b7280;
	--rb-gray-600: #515866;
	--rb-gray-800: #2b3038;
	--rb-white: #ffffff;
	--rb-black: #14181f;

	/* ============= Semantic aliases ============= */
	--rb-color-brand:        var(--rb-navy-900);
	--rb-color-brand-hover:  var(--rb-navy-950);
	--rb-color-accent:       var(--rb-orange-500);
	--rb-color-accent-hover: var(--rb-orange-600);
	--rb-color-heading:      var(--rb-navy-900);
	--rb-color-text:         var(--rb-gray-800);
	--rb-color-text-muted:   var(--rb-gray-500);
	--rb-color-bg:           var(--rb-white);
	--rb-color-bg-alt:       var(--rb-gray-100);
	--rb-color-border:       var(--rb-gray-200);

	/* ============= Fonty =============
	 * Manrope (tekst) i Lora (nagłówki sekcji), hostowane lokalnie w assets/fonts/.
	 * Definicje @font-face: assets/css/fonts.css.
	 */
	--rb-font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--rb-font-serif: 'Lora', Georgia, 'Times New Roman', serif;

	/* ============= Skala typograficzna ============= */
	--rb-fs-h1: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);   /* ~56px desktop */
	--rb-lh-h1: 1.15;
	--rb-fw-h1: 800;
	--rb-fs-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);  /* ~44px */
	--rb-lh-h2: 1.2;
	--rb-fw-h2: 800;
	--rb-fs-h3: clamp(1.375rem, 1.1rem + 1vw, 2rem);      /* ~32px */
	--rb-lh-h3: 1.25;
	--rb-fw-h3: 700;
	--rb-fs-h4: 1.375rem;   /* 22px */
	--rb-lh-h4: 1.35;
	--rb-fw-h4: 700;
	--rb-fs-h5: 1.125rem;   /* 18px */
	--rb-fw-h5: 700;

	--rb-fs-body-l: 1.0625rem;  /* 17px */
	--rb-lh-body-l: 1.65;
	--rb-fs-body-m: 1rem;       /* 16px */
	--rb-lh-body-m: 1.6;
	--rb-fs-body-s: 0.875rem;   /* 14px */
	--rb-lh-body-s: 1.55;
	--rb-fs-body-xs: 0.75rem;   /* 12px */

	--rb-fs-btn: 1rem;
	--rb-fw-btn: 600;

	/* ============= Spacing ============= */
	--rb-space-1: 0.25rem;
	--rb-space-2: 0.5rem;
	--rb-space-3: 0.75rem;
	--rb-space-4: 1rem;
	--rb-space-5: 1.25rem;
	--rb-space-6: 1.5rem;
	--rb-space-8: 2rem;
	--rb-space-10: 2.5rem;
	--rb-space-12: 3rem;
	--rb-space-16: 4rem;
	--rb-space-20: 5rem;
	--rb-space-24: 6rem;

	/* ============= Radius ============= */
	--rb-radius-sm: 0.375rem;
	--rb-radius-md: 0.625rem;
	--rb-radius-lg: 1rem;
	--rb-radius-xl: 1.25rem;
	--rb-radius-2xl: 1.75rem;
	--rb-radius-full: 999px;

	/* ============= Cienie ============= */
	--rb-shadow-sm: 0 1px 2px rgb(15 35 64 / 0.06);
	--rb-shadow-md: 0 6px 20px rgb(15 35 64 / 0.08);
	--rb-shadow-lg: 0 16px 44px rgb(15 35 64 / 0.12);
	--rb-shadow-card: 0 8px 28px rgb(15 35 64 / 0.10);

	/* ============= Layout ============= */
	--rb-container-max: 1240px;
	/* Wspólny obrys sekcji ścieżki zakupowej: program, karta ceny, pasek „sprawdź także". */
	--rb-offer-max: 66rem;
	--rb-container-gutter: clamp(1rem, 4vw, 2.5rem);
	--rb-header-height: 84px;

	/* ============= Animacje ============= */
	--rb-transition-fast: 150ms ease;
	--rb-transition-normal: 250ms ease;
}