/* Design tokens — loaded on the frontend (before global.css) and in the block editor. */
:root {
	/* ==========================================
	   Color palette — Figma token names
	   ========================================== */

	/* Neutral */
	--neutral-white: #ffffff;
	--neutral-100: #e9ebed;
	--neutral-300: #bec2c8;
	--neutral-500: #9299a3;
	--neutral-600: #757a82;
	--neutral-800: #3a3d41;
	--neutral-800-footer: #3a3d41;
	--neutral-900: #1d1e21;
	--neutral-black: #000000;

	/* Navy */
	--navy-50: #f1effc;
	--navy-100: #e6e3f4;
	--navy-200: #a399d3;
	--navy-300: #7666bc;
	--navy-400: #4833a6;
	--navy-500: #1a0090;
	--navy-600: #150073;

	/* Red */
	--red-500: #ed1c24;
	--red-600: #be161d;
	--red-650: #a41419;
	--red-700: #8e1116;

	/* ==========================================
	   Functional aliases (used throughout codebase)
	   ========================================== */
	--color-white: var(--neutral-white);
	--color-white-permanent: #ffffff; /* stały biały — tekst na tłach które nie zmieniają się w dark mode */
	--color-black: var(--neutral-black);
	--color-dark: var(--neutral-800);
	--color-dark-bg: var(--neutral-900);
	--color-border: #e0e0e0;
	--color-hover-bg: #f5f5f5;
	--color-gray: var(--neutral-500);
	--color-primary: var(--navy-600);
	--color-primary-dark: var(--navy-500);
	--color-accent: var(--navy-300);
	--color-link: #5046e5;
	--color-cta: var(--red-600);
	--color-cta-hover: #a01218;

	/* Alpha colors */
	--color-white-alpha-10: rgba(255, 255, 255, 0.1);
	--color-white-alpha-15: rgba(255, 255, 255, 0.15);
	--color-white-alpha-20: rgba(255, 255, 255, 0.2);
	--color-white-alpha-30: rgba(255, 255, 255, 0.3);

	/* Typography */
	--font-family: 'IBM Plex Sans', sans-serif;

	/* Border radius */
	--corner-l: 40px;
	--corner-s: 12px;
	--corner-xs: 4px;
	--radius-dropdown-trigger: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
	--radius-dropdown-panel: var(--corner-s) var(--corner-xs) var(--corner-s) var(--corner-s);
	--radius-option-default: var(--corner-s) var(--corner-s) var(--corner-xs) var(--corner-s);
	--radius-option-active: var(--corner-s) var(--corner-xs) var(--corner-s) var(--corner-s);

	/* Layout */
	--container-width: 1376px;
	--container-padding: 32px;

	/* Effects */
	--shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12);
	--gradient-header: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);

	/* Z-index */
	--z-navbar: 1000;
	--z-mobile-menu: 1001;
}