/* ==========================================================
   ДИЗАЙН-ТОКЕНИ
   Винесені в CSS custom properties, а не "захардкоджені" по файлах —
   зміна одного значення тут одразу оновлює весь сайт.
   Палітра: чорно-білий монохром + жовтий акцент (з референсу + лого KLOK)
   ========================================================== */

:root {

	/* ---------- Кольори ---------- */
	--color-black:        #0D0D0D;   /* основний темний, не чистий #000 — м'якше для великих площ */
	--color-white:        #FFFFFF;
	--color-cream:        #F5F3EF;   /* фоновий відтінок замість чистого білого, як у референсі */
	--color-accent:       #FFDD00;   /* фірмовий жовтий KLOK — звірено з logo.svg */
	--color-accent-dark:  #FDCA17;   /* другий відтінок з того ж лого — для hover-станів */
	--color-gray-700:     #333333;   /* основний текст на світлому фоні */
	--color-gray-500:     #6B6B6B;   /* другорядний текст */
	--color-gray-200:     #E4E4E4;   /* розділювачі, рамки */
	--color-gray-100:     #F7F7F7;   /* фон карток на світлому тлі */

	/* ---------- Типографіка ---------- */
	--font-heading: 'Unbounded', sans-serif;   /* важкий гротеск для заголовків, аналог референсу */
	--font-body:    'Manrope', sans-serif;      /* нейтральний, добре читається в довгих текстах */
	--font-accent:  'Caveat', cursive;          /* рукописний акцент, як у референсі */

	--fs-h1: clamp(2.25rem, 5vw + 1rem, 4.5rem);
	--fs-h2: clamp(1.75rem, 3vw + 1rem, 3rem);
	--fs-h3: clamp(1.125rem, 1vw + 1rem, 1.5rem);
	--fs-lead: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;

	--lh-heading: 1.05;
	--lh-body: 1.6;

	/* ---------- Spacing (кратне 4px — послідовна ритміка) ---------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* ---------- Контейнер ---------- */
	--container-max: 1280px;
	--container-padding: clamp(1rem, 4vw, 2.5rem);

	/* ---------- Інше ---------- */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-full: 999px;
	--transition-base: 200ms ease;
	--shadow-card: 0 4px 24px rgba(13, 13, 13, 0.06);
}