/**
 * Tokeny designu - eksport 1:1 ze zmiennych Figmy (plik 6A2S2piD9Tclo9CAF0BlUR).
 * Kolekcje: Primitives, Color (tryby Dark/Light), Spacing, Radius, Typography.
 * Motyw strony = tryb Light. Ciemne wstawki (nagłówki kart cennika, pasy CTA,
 * stopka) używają klasy .is-dark, która przemapowuje semantyczne kolory na tryb Dark.
 */

:root {
	/* Primitives */
	--black-base: #0e0e0e;
	--black-elevated: #141414;
	--black-surface: #1c1c1c;
	--black-raised: #242424;
	--white: #ffffff;
	--gray-50: #f8faf9;
	--gray-100: #f1f4f3;
	--gray-150: #e9edeb;
	--gray-200: #e5e5e5;
	--gray-300: #d4d4d4;
	--gray-400: #a3a3a3;
	--gray-500: #737373;
	--gray-550: #6b6b6b;  /* drobny tekst - 4.5:1 również na jasnoszarym tle */
	--gray-700: #404040;
	--gray-800: #262626;
	--green-100: #dff3ea;
	--green-400: #1db954;
	--green-500: #10b981;
	--green-600: #0e9f6e;
	/* Warianty dostępnościowe: zieleń z projektu ma na bieli kontrast 3.39:1,
	   czyli poniżej progu WCAG AA (4.5:1) dla tekstu. Do wypełnień i grafiki
	   zostaje green/600, do tekstu i przycisków używamy przyciemnionych odcieni. */
	--green-650: #0b7a55;
	--green-700: #0b7a55;
	--green-900: #052e22;

	/* Color - tryb Light */
	--bg-base: var(--white);
	--bg-elevated: var(--gray-100);
	--bg-surface: var(--white);
	--bg-raised: var(--gray-150);
	--text-primary: var(--black-base);
	--text-secondary: var(--gray-700);
	--text-muted: var(--gray-550);
	--text-on-accent: var(--white);
	--accent: var(--green-650);        /* tekst, przyciski - min. 4.5:1 na każdym tle motywu */
	--accent-fill: var(--green-600);   /* wypełnienia i dekoracje - odcień z Figmy */
	--accent-hover: var(--green-600);
	--accent-pressed: var(--green-900);
	--accent-subtle: var(--green-100);
	--accent-on-subtle: var(--green-700); /* tekst na jasnozielonym tle */
	--border-default: var(--gray-200);
	--border-strong: var(--gray-300);
	--border-accent: var(--green-600);

	/* Spacing */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;
	--space-5xl: 128px;

	/* Radius */
	--radius-none: 0;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-full: 999px;

	/* Typography */
	--font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Skala typograficzna - płynna między mobile (390) a desktop (1440).
	   Wartości brzegowe = style tekstu z Figmy oraz ich mobilne odpowiedniki. */
	--fs-display: clamp(2rem, 1.05rem + 3.9vw, 4rem);      /* 32 -> 64 */
	--fs-h1: clamp(1.875rem, 1.28rem + 2.44vw, 3rem);      /* 30 -> 48 */
	--fs-h2: clamp(1.625rem, 1.28rem + 1.43vw, 2.25rem);   /* 26 -> 36 */
	--fs-h3: clamp(1.3125rem, 1.13rem + 0.76vw, 1.625rem); /* 21 -> 26 */
	--fs-h4: clamp(1.1875rem, 1.13rem + 0.24vw, 1.25rem);  /* 19 -> 20 */
	--fs-body-lg: clamp(1rem, 0.94rem + 0.24vw, 1.125rem); /* 16 -> 18 */
	--fs-body: 1rem;
	--fs-body-sm: 0.875rem;
	--fs-caption: 0.8125rem;
	--fs-overline: 0.8125rem;

	/* Layout */
	--container: 1280px;
	--gutter: 20px;
	--section-y: clamp(3rem, 1.5rem + 6vw, 6rem);
	--header-h: 64px;
}

@media (min-width: 1200px) {
	:root {
		--gutter: 80px;
		--header-h: 87px;
	}
}

/* Ciemne wstawki - tryb Dark z Figmy */
.is-dark {
	--bg-base: var(--black-base);
	--bg-elevated: var(--black-elevated);
	--bg-surface: var(--black-surface);
	--bg-raised: var(--black-raised);
	--text-primary: var(--white);
	--text-secondary: var(--gray-400);
	/* gray/500 na czerni daje tylko 4.07:1 - drobny tekst wymaga jaśniejszego odcienia */
	--text-muted: var(--gray-400);
	--text-on-accent: var(--black-base);
	--accent: var(--green-500);
	--accent-fill: var(--green-500);
	--accent-on-subtle: var(--green-400);
	--accent-hover: var(--green-400);
	--accent-pressed: var(--green-600);
	--accent-subtle: var(--green-900);
	--border-default: var(--gray-800);
	--border-strong: var(--gray-700);
	--border-accent: var(--green-500);

	background-color: var(--bg-base);
	color: var(--text-primary);
}