/* ============================================================
   ALEX-PC — токени дизайн-системи
   Значення зняті з погоджених макетів. Змінювати тут, а не в компонентах.
   ============================================================ */

:root {
	/* --- Кольори бренду --- */
	--c-blue-50:  #eff6ff;
	--c-blue-100: #dbeafe;
	--c-blue-200: #bfdbfe;
	--c-blue-500: #3b82f6;
	--c-blue-600: #2563eb;  /* основний акцент кнопок і посилань */
	--c-blue-700: #1d4ed8;
	--c-blue-800: #1e40af;

	/* --- Нейтральні --- */
	--c-white:    #ffffff;
	--c-gray-50:  #f8fafc;
	--c-gray-100: #f1f5f9;
	--c-gray-200: #e2e8f0;
	--c-gray-300: #cbd5e1;
	--c-gray-400: #94a3b8;
	--c-gray-500: #64748b;
	--c-gray-600: #475569;
	--c-gray-700: #334155;
	--c-gray-800: #1e293b;
	--c-gray-900: #0f172a;  /* темні технологічні банери */

	/* --- Статусні --- */
	--c-green-50:  #f0fdf4;
	--c-green-500: #22c55e;
	--c-green-600: #16a34a;  /* «В наявності» */
	--c-red-50:    #fef2f2;
	--c-red-500:   #ef4444;
	--c-red-600:   #dc2626;  /* знижки, «Немає» */
	--c-amber-50:  #fffbeb;
	--c-amber-500: #f59e0b;  /* бейдж TOP, зірки рейтингу */
	--c-amber-600: #d97706;
	--c-violet-500: #8b5cf6;

	/* --- Семантичні псевдоніми --- */
	--color-bg: var(--c-white);
	--color-bg-soft: var(--c-gray-50);
	--color-bg-muted: var(--c-gray-100);
	--color-bg-dark: var(--c-gray-900);
	--color-text: var(--c-gray-900);
	--color-text-soft: var(--c-gray-500);
	--color-text-muted: var(--c-gray-400);
	--color-text-invert: var(--c-white);
	--color-border: var(--c-gray-200);
	--color-border-strong: var(--c-gray-300);
	--color-accent: var(--c-blue-600);
	--color-accent-hover: var(--c-blue-700);
	--color-accent-soft: var(--c-blue-50);
	--color-success: var(--c-green-600);
	--color-danger: var(--c-red-600);
	--color-warning: var(--c-amber-500);

	/* --- Типографіка --- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

	--fs-xs:   0.75rem;    /* 12px — бейджі, підписи */
	--fs-sm:   0.8125rem;  /* 13px — дрібний текст */
	--fs-base: 0.875rem;   /* 14px — базовий у каталозі */
	--fs-md:   1rem;       /* 16px — основний текст */
	--fs-lg:   1.125rem;   /* 18px */
	--fs-xl:   1.25rem;    /* 20px */
	--fs-2xl:  1.5rem;     /* 24px */
	--fs-3xl:  1.875rem;   /* 30px */
	--fs-4xl:  2.25rem;    /* 36px */
	--fs-5xl:  3rem;       /* 48px — hero */

	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-normal: 1.55;
	--lh-relaxed: 1.7;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Відступи (крок 4px) --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;

	/* --- Радіуси --- */
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-2xl: 20px;
	--r-full: 999px;

	/* --- Тіні: акуратні, без важких ефектів --- */
	--shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
	--shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .03);
	--shadow-lg: 0 12px 32px rgba(15, 23, 42, .08), 0 4px 8px rgba(15, 23, 42, .04);
	--shadow-xl: 0 24px 48px rgba(15, 23, 42, .12);
	--shadow-focus: 0 0 0 3px rgba(37, 99, 235, .15);

	/* --- Сітка --- */
	--container: 1280px;
	--container-wide: 1440px;
	--gutter: 1rem;

	/* --- Анімації --- */
	--ease: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(0, 0, .2, 1);
	--t-fast: .15s;
	--t-base: .25s;
	--t-slow: .4s;

	/* --- Шари --- */
	--z-base: 1;
	--z-sticky: 100;
	--z-header: 500;
	--z-dropdown: 600;
	--z-overlay: 800;
	--z-modal: 900;
	--z-toast: 1000;

	/* --- Розміри елементів --- */
	--header-h: 72px;
	--topbar-h: 36px;
	--bottom-nav-h: 60px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 1.5rem;
		--fs-base: 0.9375rem;
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 2rem;
	}
}

/* Повага до системних налаштувань доступності. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0.01ms;
		--t-base: 0.01ms;
		--t-slow: 0.01ms;
	}
}