/* BRAND — surowe wartości: palety, skale, literały. Nic tu nie odwołuje się do innych tokenów.
   Warstwy: brand → alias (tokens-alias.css) → mapped (tokens-mapped.css).
   Komponenty i SCSS używają aliasów i mappedów, nie brandu. */

/* outfit-300 - latin_latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300;
	src: url('../../fonts/outfit-v15-latin_latin-ext-300.woff2') format('woff2');
}
/* outfit-regular - latin_latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	src: url('../../fonts/outfit-v15-latin_latin-ext-regular.woff2') format('woff2');
}
/* outfit-500 - latin_latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	src: url('../../fonts/outfit-v15-latin_latin-ext-500.woff2') format('woff2');
}
/* outfit-600 - latin_latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 600;
	src: url('../../fonts/outfit-v15-latin_latin-ext-600.woff2') format('woff2');
}
/* outfit-700 - latin_latin-ext */
@font-face {
	font-display: swap;
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	src: url('../../fonts/outfit-v15-latin_latin-ext-700.woff2') format('woff2');
}

:root {
	/* --- Kolory --- */

	--color-white: #ffffff;
	--color-black: #000000;

	--color-gold-50: #fff4d9;
	--color-gold-100: #f7eacb;
	--color-gold-200: #e6d6af;
	--color-gold-300: #d0bc8b;
	--color-gold-400: #b8963f;
	--color-gold-500: #9a7c29;
	--color-gold-600: #836400;
	--color-gold-700: #684e00;
	--color-gold-800: #4e3a00;
	--color-gold-900: #302200;
	--color-gold-950: #120900;

	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d4d4d4;
	--color-gray-400: #a3a3a3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;
	--color-gray-950: #0a0a0a;

	--color-red-50: #fef2f2;
	--color-red-100: #fee2e2;
	--color-red-200: #fecaca;
	--color-red-300: #fca5a5;
	--color-red-400: #f87171;
	--color-red-500: #ef4444;
	--color-red-600: #dc2626;
	--color-red-700: #b91c1c;
	--color-red-800: #991b1b;
	--color-red-900: #7f1d1d;
	--color-red-950: #450a0a;

	--color-green-50: #f0fdf4;
	--color-green-100: #dcfce7;
	--color-green-200: #bbf7d0;
	--color-green-300: #86efac;
	--color-green-400: #4ade80;
	--color-green-500: #22c55e;
	--color-green-600: #16a34a;
	--color-green-700: #15803d;
	--color-green-800: #166534;
	--color-green-900: #14532d;
	--color-green-950: #052e16;

	--color-yellow-500: #ffb400;

	/* --- Typografia --- */

	--font-family-sans: 'Outfit', sans-serif;

	--font-size-xs: 0.75rem; /* 12 */
	--font-size-sm: 0.875rem; /* 14 */
	--font-size-base: 1rem; /* 16 */
	--font-size-lg: 1.125rem; /* 18 */
	--font-size-xl: 1.25rem; /* 20 */
	--font-size-2xl: 1.5rem; /* 24 */
	--font-size-3xl: 1.75rem; /* 28 */
	--font-size-4xl: 2rem; /* 32 */
	--font-size-5xl: 2.25rem; /* 36 */
	--font-size-6xl: 2.5rem; /* 40 */
	--font-size-7xl: 2.75rem; /* 44 */
	--font-size-8xl: 3rem; /* 48 */
	--font-size-9xl: 3.5rem; /* 56 */
	--font-size-10xl: 3.75rem; /* 60 */

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Interlinia: stała wartość w px (liczba = px) albo proporcja (liczba = %) */
	--line-height-px-16: 1rem;
	--line-height-px-20: 1.25rem;
	--line-height-px-24: 1.5rem;
	--line-height-px-28: 1.75rem;
	--line-height-px-32: 2rem;
	--line-height-px-36: 2.25rem;
	--line-height-px-40: 2.5rem;
	--line-height-px-44: 2.75rem;
	--line-height-px-52: 3.25rem;
	--line-height-px-56: 3.5rem;
	--line-height-px-66: 4.125rem;
	--line-height-px-72: 4.5rem;
	--line-height-pct-130: 1.3;

	/* --- Skala (Figma: Brand → Scale; nazwa kroku ≠ piksele, wartość w komentarzu) --- */

	--scale-0: 0; /* 0 */
	--scale-25: 1px; /* 1 */
	--scale-50: 2px; /* 2 */
	--scale-100: 0.25rem; /* 4 */
	--scale-150: 0.375rem; /* 6 */
	--scale-200: 0.5rem; /* 8 */
	--scale-300: 0.75rem; /* 12 */
	--scale-400: 1rem; /* 16 */
	--scale-500: 1.5rem; /* 24 */
	--scale-600: 2rem; /* 32 */
	--scale-700: 3rem; /* 48 */
	--scale-800: 4rem; /* 64 */
	--scale-900: 5rem; /* 80 */
	--scale-1000: 6rem; /* 96 */
	--scale-1100: 8rem; /* 128 */
	--scale-1200: 12rem; /* 192 */

	--border-width-0: 0;
	--border-width-1: 1px;
	--border-width-2: 2px;
	--border-width-4: 4px;
	--border-width-6: 6px;

	--radius-1: 2px;
	--radius-2: 4px;
	--radius-3: 6px;
	--radius-4: 8px;
	--radius-5: 12px;
	--radius-6: 16px;
	--radius-7: 24px;
	--radius-8: 32px;
	--radius-9: 9999px;


	--shadow-color: 220 3% 15%; /* zmieniasz w jednym miejscu dla wszystkich cieni */

	--shadow-md: 0 3px 5px -2px hsl(var(--shadow-color) / 4%), 0 7px 14px -5px hsl(var(--shadow-color) / 6%);

	--shadow-lg:
		0 -2px 5px 0 hsl(var(--shadow-color) / 3%), 0 1px 1px -2px hsl(var(--shadow-color) / 4%),
		0 2px 2px -2px hsl(var(--shadow-color) / 4%), 0 5px 5px -2px hsl(var(--shadow-color) / 5%),
		0 9px 9px -2px hsl(var(--shadow-color) / 6%), 0 16px 16px -2px hsl(var(--shadow-color) / 7%);

	--shadow-xl:
		0 -1px 2px 0 hsl(var(--shadow-color) / 3%), 0 2px 1px -2px hsl(var(--shadow-color) / 4%),
		0 5px 5px -2px hsl(var(--shadow-color) / 4%), 0 10px 10px -2px hsl(var(--shadow-color) / 5%),
		0 20px 20px -2px hsl(var(--shadow-color) / 6%), 0 40px 40px -2px hsl(var(--shadow-color) / 8%);

	--shadow-color-dark: 220 40% 2%;

	--shadow-md-dark:
		0 3px 5px -2px hsl(var(--shadow-color-dark) / 28%), 0 7px 14px -5px hsl(var(--shadow-color-dark) / 30%);

	--shadow-lg-dark:
		0 -2px 5px 0 hsl(var(--shadow-color-dark) / 27%), 0 1px 1px -2px hsl(var(--shadow-color-dark) / 28%),
		0 2px 2px -2px hsl(var(--shadow-color-dark) / 28%), 0 5px 5px -2px hsl(var(--shadow-color-dark) / 29%),
		0 9px 9px -2px hsl(var(--shadow-color-dark) / 30%), 0 16px 16px -2px hsl(var(--shadow-color-dark) / 31%);

	--shadow-xl-dark:
		0 -1px 2px 0 hsl(var(--shadow-color-dark) / 27%), 0 2px 1px -2px hsl(var(--shadow-color-dark) / 28%),
		0 5px 5px -2px hsl(var(--shadow-color-dark) / 28%), 0 10px 10px -2px hsl(var(--shadow-color-dark) / 29%),
		0 20px 20px -2px hsl(var(--shadow-color-dark) / 30%), 0 40px 40px -2px hsl(var(--shadow-color-dark) / 32%);
}