/*
 * SAAD Cosmetics — дизайн-токены из макетов Claude Design.
 * Все цвета/шрифты/размеры/отступы/радиусы сайта определяются здесь.
 * Исключение: значения брейкпоинтов в media-запросах main.css (CSS-переменные
 * в @media не работают). Брейкпоинты: 1440 / 1024 / 768 / 375.
 */

/* ---- Шрифты (локальные woff2, cyrillic+latin) ---- */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-v21-cyrillic_latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-v21-cyrillic_latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-v21-cyrillic_latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-v21-cyrillic_latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/cormorant-garamond-v21-cyrillic_latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/jost-v20-cyrillic_latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/jost-v20-cyrillic_latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/jost-v20-cyrillic_latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/jost-v20-cyrillic_latin-600.woff2') format('woff2');
}

:root {
	/* ---- Цвета ---- */
	--ink: #14120F;            /* основной тёмный: текст, кнопки, футер */
	--gold: #B8913F;           /* акцент: hover, активные состояния */
	--gold-2: #C6A45C;         /* золото светлее: на тёмном фоне */
	--white: #fff;
	--cream: #F7F3EA;          /* фон карточек, сайдбаров, секций */
	--cream-hero: #F3EBDD;     /* фон hero-слайдера */
	--cream-sel: #FDF9F0;      /* фон выбранной опции */
	--border: #E9E2D6;         /* разделители, бордеры карточек */
	--border-input: #D9CFBC;   /* бордеры полей ввода */
	--text-2: #55504A;         /* описания, вторичный текст */
	--text-3: #3E3A34;         /* текст юр. страниц, табов */
	--muted: #8A8072;          /* подписи, плейсхолдеры */
	--muted-2: #B0A794;        /* зачёркнутая цена, иконка удаления */
	--footer-text: #B5AC9C;    /* текст в футере */
	--sand: #D8CDB8;           /* текст topbar */
	--green: #4C7A4C;          /* «В наличии» */
	--red: #B23A2E;            /* hover удаления, ошибки форм */
	--info-bg: #FDF4F0;        /* info-блок «Возврат» */
	--info-border: #E9D5C8;
	--promo-green: #E5EBE2;    /* фон широкого промо */
	--overlay-dark: rgba(20, 18, 15, 0.72);   /* градиенты на фото */
	--overlay-dark-mid: rgba(20, 18, 15, 0.62);
	--overlay-dark-soft: rgba(20, 18, 15, 0.25);
	--footer-divider: rgba(255, 255, 255, 0.1);
	--banner-fade: rgba(240, 244, 238, 0.9);  /* засветка широкого баннера */
	--banner-fade-mid: rgba(240, 244, 238, 0.72);
	--banner-fade-0: rgba(240, 244, 238, 0);

	/* ---- Шрифты ---- */
	--font-serif: 'Cormorant Garamond', serif;
	--font-sans: 'Jost', sans-serif;

	/* ---- Размеры шрифта (имя = px из макета) ---- */
	--fs-10: 10px;
	--fs-12: 12px;
	--fs-13: 13px;
	--fs-14: 14px;
	--fs-15: 15px;
	--fs-16: 16px;
	--fs-17: 17px;
	--fs-18: 18px;
	--fs-19: 19px;
	--fs-20: 20px;
	--fs-22: 22px;
	--fs-23: 23px;
	--fs-25: 25px;
	--fs-26: 26px;
	--fs-28: 28px;
	--fs-30: 30px;
	--fs-32: 32px;
	--fs-34: 34px;
	--fs-40: 40px;
	--fs-44: 44px;
	--fs-48: 48px;
	--fs-52: 52px;
	--fs-64: 64px;

	/* ---- Letter-spacing ---- */
	--ls-02: 0.02em;
	--ls-04: 0.04em;
	--ls-06: 0.06em;
	--ls-08: 0.08em;
	--ls-10: 0.1em;
	--ls-12: 0.12em;
	--ls-14: 0.14em;
	--ls-16: 0.16em;
	--ls-18: 0.18em;
	--ls-20: 0.2em;
	--ls-22: 0.22em;
	--ls-30: 0.3em;
	--ls-32: 0.32em;
	--ls-34: 0.34em;
	--ls-42: 0.42em;

	/* ---- Радиусы ---- */
	--r-pill: 40px;    /* кнопки, поля, счётчики */
	--r-card: 6px;     /* карточки, блоки, изображения */
	--r-area: 22px;    /* textarea */
	--r-select: 30px;  /* select сортировки */
	--r-round: 50%;    /* круги: иконки, категории */

	/* ---- Сетка ---- */
	--container: 1600px;
	--gutter: 24px;    /* боковой отступ контейнера */
	--grid-gap: 26px;  /* стандартный gap гридов карточек */

	/* ---- Отступы (шкала макета, имя = px) ---- */
	--s-2: 2px;
	--s-4: 4px;
	--s-5: 5px;
	--s-6: 6px;
	--s-8: 8px;
	--s-10: 10px;
	--s-11: 11px;
	--s-12: 12px;
	--s-13: 13px;
	--s-14: 14px;
	--s-15: 15px;
	--s-16: 16px;
	--s-17: 17px;
	--s-18: 18px;
	--s-20: 20px;
	--s-22: 22px;
	--s-24: 24px;
	--s-26: 26px;
	--s-28: 28px;
	--s-30: 30px;
	--s-32: 32px;
	--s-34: 34px;
	--s-36: 36px;
	--s-38: 38px;
	--s-40: 40px;
	--s-42: 42px;
	--s-44: 44px;
	--s-48: 48px;
	--s-50: 50px;
	--s-54: 54px;
	--s-56: 56px;
	--s-60: 60px;
	--s-64: 64px;
	--s-70: 70px;
	--s-80: 80px;
	--s-90: 90px;
	--s-130: 130px;

	/* ---- Разное ---- */
	--bw: 1px;             /* стандартная граница */
	--bw-2: 2px;           /* активное подчёркивание nav */
	--tap-min: 40px;       /* минимальная тап-зона (ТЗ) */
	--header-logo: 72px;   /* размер картинки логотипа */
	--hero-min-h: 600px;
	--hero-media-md: 340px;   /* фото hero на планшете */
	--hero-media-sm: 240px;   /* фото hero на мобильном */
	--banner-min-h: 440px;    /* мин. высота широкого баннера */
	--banner-content-w: 480px;/* ширина текста баннера */
	--sidebar-w: 250px;       /* сайдбар каталога */
	--thumb: 92px;            /* миниатюра галереи товара */
	--thumb-sm: 72px;         /* миниатюра на мобильном */
	--content-narrow: 820px;  /* контент табов товара */
	--content-legal: 860px;   /* узкая колонка юр. страниц */
	--form-narrow: 480px;     /* ширина форм */
	--cart-side-w: 380px;     /* сайдбар корзины */
	--checkout-side-w: 420px; /* сайдбар оформления */
	--pay-name-w: 130px;      /* колонка названий способов оплаты */
	--quote-w: 720px;         /* ширина цитаты «О нас» */
	--dur: 0.3s;           /* базовая анимация */
	--anim-dur: 0.8s;      /* скролл-анимации появления */
	--anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--anim-dist: 44px;     /* дистанция сдвига появления */
	--anim-dist-sm: 24px;
	--shine: rgba(255, 255, 255, 0.35); /* блик на кнопках */
	--parallax-scale: 1.32; /* запас картинки под параллакс */
	--parallax-range: 0.24; /* доля высоты блока, на которую едет картинка */
	--dur-slide: 0.7s;     /* слайдер hero */
	--ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
	--marquee-dur: 36s;
}