/* =========================================================
   ДИЗАЙН-ТОКЕНЫ
   Все CSS-переменные проекта. Палитра, типографика, отступы.
   Любая правка дизайн-системы — здесь.
   ========================================================= */
:root {
	/* === Цвет: бренд (зелёный) === */
	--color-brand-50:  #E8F2EA;
	--color-brand-100: #C5E0CC;
	--color-brand-200: #9CCBA8;
	--color-brand-300: #6BB37D;
	--color-brand-400: #4FB061;
	--color-brand-500: #2E8540;
	--color-brand-600: #246833;
	--color-brand-700: #1B5E2C;
	--color-brand-800: #144523;
	--color-brand-900: #0A2E15;

	/* === Цвет: нейтрали (slate) === */
	--color-neutral-0:   #FFFFFF;
	--color-neutral-50:  #F8FAFC;
	--color-neutral-100: #F1F5F9;
	--color-neutral-200: #E2E8F0;
	--color-neutral-300: #CBD5E1;
	--color-neutral-400: #94A3B8;
	--color-neutral-500: #64748B;
	--color-neutral-600: #475569;
	--color-neutral-700: #334155;
	--color-neutral-800: #1E293B;
	--color-neutral-900: #0F172A;

	/* === Семантика — пользоваться в компонентах === */
	--bg:            var(--color-neutral-0);
	--bg-subtle:     var(--color-neutral-50);
	--bg-muted:      var(--color-neutral-100);
	--text:          var(--color-neutral-900);
	--text-muted:    var(--color-neutral-600);
	--text-subtle:   var(--color-neutral-500);
	--text-on-brand: var(--color-neutral-0);
	--border:        var(--color-neutral-200);
	--border-strong: var(--color-neutral-300);

	--action:        var(--color-brand-700);
	--action-hover:  var(--color-brand-800);
	--action-active: var(--color-brand-900);

	/* Статусы */
	--success: #16A34A;
	--warning: #D97706;
	--error:   #DC2626;

	/* === Типографика === */
	--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--text-xs:   0.75rem;   /* 12 */
	--text-sm:   0.875rem;  /* 14 */
	--text-base: 1rem;      /* 16 */
	--text-lg:   1.125rem;  /* 18 */
	--text-xl:   1.25rem;   /* 20 */
	--text-2xl:  1.5rem;    /* 24 */
	--text-3xl:  1.875rem;  /* 30 */
	--text-4xl:  2.25rem;   /* 36 */
	--text-5xl:  3rem;      /* 48 */
	--text-6xl:  3.75rem;   /* 60 */
	--text-7xl:  4.5rem;    /* 72 */

	--leading-tight:   1.1;
	--leading-snug:    1.25;
	--leading-normal:  1.5;
	--leading-relaxed: 1.65;

	--tracking-tight:  -0.02em;
	--tracking-snug:   -0.01em;
	--tracking-wide:   0.05em;

	/* === Отступы (шкала 4px) === */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* === Радиусы === */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   14px;
	--radius-xl:   20px;
	--radius-full: 9999px;

	/* === Тени === */
	--shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.05);
	--shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
	--shadow-lg:    0 12px 32px rgba(15, 23, 42, 0.12);
	--shadow-focus: 0 0 0 3px rgba(27, 94, 44, 0.18);

	/* === Контейнеры === */
	--container-narrow:    720px;   /* текстовые страницы */
	--container:          1280px;   /* основная сетка */
	--container-wide:     1440px;   /* галереи, портфолио */
	--container-padding-x: 1.5rem;

	/* === Easing === */
	--ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);   /* мягкий out — для hover, появлений */
	--ease-snappy:  cubic-bezier(0.4, 0, 0.2, 1);     /* нейтральный — для микро-интеракций */
	--ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);/* лёгкая отдача — кнопки press */

	/* === Скорости (с дефолтным easing) === */
	--transition-fast: 200ms var(--ease-smooth);
	--transition-base: 320ms var(--ease-smooth);
	--transition-slow: 600ms var(--ease-smooth);

	/* === Высота шапки === */
	--header-height: 72px;
}

/* Мобильный — поджимаем контейнер чтобы карточки получали больше ширины. */
@media (max-width: 599px) {
	:root {
		--container-padding-x: 0.5rem;
	}
}

/* Уважаем системную настройку «уменьшить анимации» — выключаем всё движение */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Брейкпоинты (для документации, используем напрямую в media-queries):
   sm: 640px · md: 768px · lg: 1024px · xl: 1280px */