/*
 * Kolory — UI Kit KFB (Figma: Rk3e0Grh4x9UvnXXcMTVmx, node 334:11 „Solutions”).
 * Wartości źródłowe: zmienne Figma (Solutions / Labs / Gray / Alpha).
 */

:root {
	color-scheme: light;

	/* --- Gray --- */
	--color-gray-1000: #000000;

	/* --- Solutions — Green --- */
	--color-solutions-green-600: #108d44;
	--color-solutions-green-400: #19b85b;
	--color-solutions-green-200: #13df68;

	/* --- Solutions — Orange --- */
	--color-solutions-orange-600: #c73d0a;
	--color-solutions-orange-400: #ee5017;
	--color-solutions-orange-200: #f8612a;

	/* --- Labs — neutrals --- */
	--color-labs-black: #050505;
	--color-labs-white-50: #ffffff;
	--color-labs-white-100: #f7f7f7;
	--color-labs-beige-900: #332e19;
	--color-labs-beige-600: #e5dfca;
	--color-labs-beige-400: #f0ede6;

	/* --- Labs — alpha (8-digit HEX = FF z przezroczystością) --- */
	--color-labs-alpha-white-50: #ffffffe5;
	--color-labs-alpha-beige-900: #332e1933;
	--color-labs-alpha-beige-600: #e5dfcacc;
	--color-labs-alpha-blue-600-80: #10228dcc;
	--color-labs-alpha-blue-600-50: #10228d80;
	--color-labs-alpha-blue-200: #03c8fdcc;

	/* --- Brand — krótkie aliasy (kompatybilność wsteczna) --- */
	--orange: var(--color-solutions-orange-600);
	--orange2: var(--color-solutions-orange-200);
	--green: var(--color-solutions-green-200);
	--black: var(--color-labs-black);
	--white: var(--color-labs-white-50);
	--gray: rgba(5, 5, 5, 0.65);
	--bg: var(--color-labs-beige-400);
	--pad: 12px;

	/* --- Semantyczne — używane w motywie --- */
	--color-orange: var(--color-solutions-orange-600);
	--color-orange-400: var(--color-solutions-orange-400);
	--color-orange-2: var(--color-solutions-orange-200);
	--color-orange-100: var(--color-solutions-orange-600);
	--color-orange-200: var(--color-solutions-orange-200);
	--color-green: var(--color-solutions-green-200);
	--color-black: var(--color-labs-black);
	--color-white: var(--color-labs-white-50);
	--color-white-100: var(--color-labs-white-100);
	--color-text-muted: var(--gray);
	--color-bg-page: var(--color-labs-beige-400);

	/* Globe / neutralne (nie z UI Kit — pomocnicze dla Three.js) */
	--color-globe-land-dot: #b0b0b0;

	/* Niebieski (bazowy + linki / akcent) */
	--color-blue-600: #10228d;
	--color-blue-200: #03c8fd;
	--color-blue-alpha-600-80: var(--color-labs-alpha-blue-600-80);
	--color-blue-alpha-600-50: var(--color-labs-alpha-blue-600-50);
	--color-blue-alpha-200: var(--color-labs-alpha-blue-200);

	/* Zamienniki starych „teal / mint” — zielony z UI Kitu */
	--color-teal: var(--color-solutions-green-600);
	--color-teal-overlay-45: color-mix(
		in srgb,
		var(--color-solutions-green-600) 45%,
		transparent
	);
	--color-teal-glow-12: color-mix(
		in srgb,
		var(--color-solutions-green-600) 12%,
		transparent
	);
	--color-mint-dot: color-mix(
		in srgb,
		var(--color-solutions-green-400) 65%,
		transparent
	);

	/* Powierzchnie i obramowania */
	--color-card: var(--color-labs-white-50);
	--color-dark-surface: var(--color-gray-1000);
	--color-footer-bg: var(--color-gray-1000);
	--color-neutral-gray: var(--color-labs-beige-600);
	--color-border-subtle: rgba(0, 0, 0, 0.08);
	--color-border-dark-soft: rgba(255, 255, 255, 0.08);

	/* Cienie oparte na czystej czerni (navbar / overlay) */
	--color-ink-04: rgba(0, 0, 0, 0.04);
	--color-ink-08: rgba(0, 0, 0, 0.08);
	--color-ink-12: rgba(0, 0, 0, 0.12);
	--color-ink-50: rgba(0, 0, 0, 0.5);
	--color-border-beige-900-20: var(--color-labs-alpha-beige-900);
	--color-border-beige-soft: var(--color-labs-beige-400);

	/* Półprzezroczyste (Labs Black #050505) */
	--color-black-55: rgba(5, 5, 5, 0.55);
	--color-black-08: rgba(5, 5, 5, 0.08);
	--color-black-72: rgba(5, 5, 5, 0.72);
	--color-black-30: rgba(5, 5, 5, 0.3);
	--color-black-10: rgba(5, 5, 5, 0.1);
	--color-black-20: rgba(5, 5, 5, 0.2);
	--color-black-35: rgba(5, 5, 5, 0.35);
	--color-black-80: rgba(5, 5, 5, 0.8);
	--color-black-50: rgba(5, 5, 5, 0.5);
	--color-black-60: rgba(5, 5, 5, 0.6);
	--color-black-40: rgba(5, 5, 5, 0.4);
	--color-black-02: rgba(5, 5, 5, 0.02);
	--color-black-15: rgba(5, 5, 5, 0.15);

	/* Biel — przezroczystości na ciemnym tle */
	--color-white-90: rgba(255, 255, 255, 0.9);
	--color-white-45: rgba(255, 255, 255, 0.45);
	--color-white-35: rgba(255, 255, 255, 0.35);
	--color-white-30: rgba(255, 255, 255, 0.3);
	--color-white-25: rgba(255, 255, 255, 0.25);
	--color-white-15: rgba(255, 255, 255, 0.15);
	--color-white-07: rgba(255, 255, 255, 0.07);
	--color-white-60: rgba(255, 255, 255, 0.6);
	--color-white-55: rgba(255, 255, 255, 0.55);
	--color-white-50: rgba(255, 255, 255, 0.5);

	/* Pomarańcz — pochodne od Orange/600 */
	--color-orange-12: rgba(199, 61, 10, 0.12);
	--color-orange-18: rgba(199, 61, 10, 0.18);
	--color-orange-07: rgba(199, 61, 10, 0.07);
	--color-orange-shadow-32: rgba(199, 61, 10, 0.32);
	--color-orange-04: rgba(199, 61, 10, 0.04);
	--color-orange-30: rgba(199, 61, 10, 0.3);

	/* Gradient maski (do zera na tle strony = beige 400) */
	--color-bg-transparent: color-mix(
		in srgb,
		var(--color-labs-beige-400) 0%,
		transparent
	);

	/* Semantyka UI */
	--color-text-main: var(--color-labs-black);
	--color-accent: var(--color-solutions-orange-600);
	--color-accent-bright: var(--color-solutions-orange-200);
	--color-text-on-dark-muted: var(--color-white-45);

	/* Edytor / UI pomocnicze */
	--color-editor-border: var(--color-labs-beige-600);
	--color-editor-surface: var(--color-labs-white-100);
	--color-editor-muted-text: var(--color-black-55);
	--color-editor-border-soft: var(--color-labs-beige-400);
}