/*
 * FLOORUS — дизайн-токены.
 *
 * Единственное место, где задаются значения цвета, кегля, отступов и радиусов.
 * Во всех остальных файлах — только ссылки на переменные.
 *
 * Контраст на белом посчитан, а не взят на глаз. Значения в комментариях —
 * фактические коэффициенты по формуле WCAG 2.1.
 */

:root {
	/* ---- Зелёный: основной цвет бренда ---- */
	--fl-green-900: #0a3d24;  /* 12.31:1 — текст, наведение на кнопках */
	--fl-green-800: #0d4f2f;  /*  9.65:1 — основной: текст, кнопки, акценты */
	--fl-green-500: #1aab65;  /*  2.98:1 — ТОЛЬКО заливки и декор, НИКОГДА текст */
	--fl-green-050: #f2f6f3;  /* подложка блоков */

	/* ---- Терракота: второй акцент ---- */
	--fl-clay-700: #9c5f4a;   /*  5.06:1 — текстовый вариант акцента */
	--fl-clay-500: #cd9787;   /*  2.51:1 — ТОЛЬКО заливки, НИКОГДА текст */
	--fl-clay-050: #faf3f0;   /* подложка блоков */

	/* ---- Нейтральные ---- */
	--fl-ink-900: #1a1a1a;    /* 17.40:1 — заголовки, основной текст */
	--fl-ink-700: #4a4a4a;    /*  8.86:1 — основной текст на подложках */
	--fl-ink-500: #767676;    /*  4.54:1 — минимум для вспомогательного текста */
	--fl-ink-200: #e0e0e0;    /* границы */
	--fl-ink-100: #f0f0f0;    /* разделители, фон */
	--fl-white:   #fff;

	/* ---- Состояния ---- */
	--fl-danger:  #a3231f;    /*  7.45:1 — ошибки, нет в наличии */
	--fl-success: var(--fl-green-800);

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

	--fl-fs-xs:  0.75rem;     /* 12px — сноски, единицы измерения */
	--fl-fs-sm:  0.875rem;    /* 14px — вспомогательный текст */
	--fl-fs-md:  1rem;        /* 16px — основной */
	--fl-fs-lg:  1.125rem;    /* 18px — крупный текст, цена в карточке */
	--fl-fs-xl:  1.375rem;    /* 22px — H3 */
	--fl-fs-2xl: 1.75rem;     /* 28px — H2 */
	--fl-fs-3xl: 2.25rem;     /* 36px — H1 на мобильном */
	--fl-fs-4xl: 3rem;        /* 48px — H1 на десктопе */

	--fl-lh-tight:  1.2;      /* заголовки */
	--fl-lh-normal: 1.5;      /* текст */

	--fl-fw-regular: 400;
	--fl-fw-medium:  500;
	--fl-fw-bold:    700;

	/* ---- Отступы, шаг 4px ---- */
	--fl-sp-1:  0.25rem;
	--fl-sp-2:  0.5rem;
	--fl-sp-3:  0.75rem;
	--fl-sp-4:  1rem;
	--fl-sp-6:  1.5rem;
	--fl-sp-8:  2rem;
	--fl-sp-12: 3rem;
	--fl-sp-16: 4rem;

	/* ---- Радиусы ---- */
	--fl-radius-sm:   6px;
	--fl-radius-md:   10px;
	--fl-radius-lg:   16px;
	--fl-radius-pill: 999px;

	/* ---- Тени ---- */
	--fl-shadow-sm: 0 1px 3px rgb(0 0 0 / 10%);
	--fl-shadow-md: 0 8px 24px rgb(0 0 0 / 12%);

	/* ---- Сетка ---- */
	--fl-container: 1600px;
	--fl-gutter: var(--fl-sp-4);

	/* ---- Переходы ---- */
	--fl-transition: 0.2s ease;
}