/* ============================================================
   Design tokens — KidsTools
   Источник: Figma "KidsTools (Copy)"
   https://www.figma.com/design/9zl7nSZWHRJEUMhZPOS3kI/KidsTools--Copy-
   Все значения выверены по замерам нод через Figma MCP.

   Шрифты: бесплатная связка Google Fonts.
   В макете использовался Gilroy (коммерческий) — заменён на Manrope,
   геометрический sans с полной Cyrillic-поддержкой, максимально
   близкий по рисунку. Manrope уже подключён в HTML-шаблонах.
   Inter импортируется здесь (нужен для символа ₸ и числовых данных).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ---------- Color — Primary (brand) ---------- */
    /* Основной бренд-цвет: кнопки CTA, лого, прайс, чипы, хедер-топбар */
    --color-primary-50:  #faf1e8;
    --color-primary-100: #f1dcc4;
    --color-primary-200: #e4bd96;
    --color-primary-300: #d39e74;
    --color-primary-400: #c9915f;
    --color-primary-500: #c08552; /* base — используется повсеместно в макете */
    --color-primary-600: #a77144;
    --color-primary-700: #8b5d38;
    --color-primary-800: #6e4a2d;
    --color-primary-900: #4f3520;

    --color-primary:            var(--color-primary-500);
    --color-primary-hover:      var(--color-primary-600);
    --color-primary-active:     var(--color-primary-700);
    --color-on-primary:         #ffffff;

    /* ---------- Color — Secondary (accent success) ---------- */
    /* Используется для "Бонус 10%" badge на карточке товара */
    --color-secondary-500: #16a34a;
    --color-secondary-600: #12873d;
    --color-secondary:     var(--color-secondary-500);
    --color-on-secondary:  #ffffff;

    /* ---------- Color — Neutral шкала ---------- */
    /* Текст базово — #111; фон поверхностей / секундарных элементов — #efefef */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f7f7f7;
    --color-neutral-100: #efefef; /* secondary surface: search, "Фильтр", "Сортировка" */
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #2a2a2a;
    --color-neutral-800: #1a1a1a; /* тёмный футер */
    --color-neutral-900: #111111; /* основной ink-цвет */

    /* ---------- Семантические алиасы ---------- */
    --color-text:            var(--color-neutral-900);
    --color-text-muted:      rgba(17, 17, 17, 0.50);  /* nav-ссылки, метки */
    --color-text-subtle:     rgba(17, 17, 17, 0.10);  /* разделители "|" */
    --color-text-inverse:    #ffffff;

    --color-bg:              #ffffff;
    --color-bg-subtle:       var(--color-neutral-100);
    --color-bg-footer:       var(--color-neutral-800);

    --color-border:          rgba(17, 17, 17, 0.05);  /* бордюры хедера/секций */
    --color-border-strong:   var(--color-neutral-100);
    --color-divider:         var(--color-neutral-100);

    /* Статус */
    --color-success:         var(--color-secondary-500);
    --color-on-success:      #ffffff;

    /* ---------- Typography — семейства ---------- */
    /* Бесплатная связка. В fallback-стеке оставлен Gilroy — если в будущем
       зальёте лицензионные .woff2 в /public/fonts и подключите @font-face,
       он подхватится автоматически везде где используется --font-sans. */
    --font-sans:    'Manrope', 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fredoka', 'Blue curve', 'Manrope', system-ui, sans-serif; /* лого: rounded display */
    --font-num:     'Inter', 'Manrope', system-ui, sans-serif;      /* символ ₸, цифры */
    --font-badge:   'Manrope', system-ui, sans-serif;               /* цифра в бейджах */

    /* ---------- Typography — размеры (step scale) ---------- */
    --font-size-2xs: 10px; /* cart badge "4" */
    --font-size-xs:  12px;
    --font-size-sm:  14px; /* body/nav, кнопки sm */
    --font-size-md:  16px; /* button default, CTA */
    --font-size-lg:  18px; /* "Бонус 10%", сабхед 18/1.4 */
    --font-size-xl:  20px; /* title карточки товара */
    --font-size-2xl: 24px; /* цена */
    --font-size-3xl: 32px;
    --font-size-4xl: 40px; /* логотип Kids tools */
    --font-size-5xl: 56px; /* hero заголовок */

    /* ---------- Typography — веса ---------- */
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    /* ---------- Typography — line-heights ---------- */
    --line-height-none:  1;     /* display, price, title */
    --line-height-tight: 1.3;   /* "Бонус 10%" 18px */
    --line-height-base:  1.4;   /* body 14/16/18 */
    --line-height-relaxed: 1.6;

    /* ---------- Typography — letter-spacing ---------- */
    /* Макет: тексты 14–18 с +2% трекингом, заголовки/прайс с -2% */
    --letter-spacing-tight:   -0.02em; /* 56px hero, 24px price, 20px title */
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.02em;  /* 14/16/18 body, nav, label */

    /* ---------- Spacing scale (4px base) ---------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* Нестандартные шаги, встречающиеся в макете */
    --space-2-5: 10px; /* top-bar py */
    --space-3-5: 14px; /* product CTA py */
    --space-4-5: 18px; /* button pl (asymmetric) */

    /* ---------- Container / layout ---------- */
    --container-max:       1440px;
    --container-content:   1360px; /* layout использует 40px side gutter */
    --container-gutter:    40px;

    /* ---------- Border radius ---------- */
    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   8px;   /* базовый: кнопки, инпуты, карточки, иконки-кнопки */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px; /* чипы фильтров, badge с числом */
    --radius-full: 50%;

    /* ---------- Border widths ---------- */
    --border-width-1: 1px;
    --border-width-2: 2px;

    /* ---------- Shadows ---------- */
    /* Макет плоский — явных теней нет. Даём утилитарную шкалу для hover/focus. */
    --shadow-none:   none;
    --shadow-sm:     0 1px 2px rgba(17, 17, 17, 0.04);
    --shadow-md:     0 4px 12px rgba(17, 17, 17, 0.06);
    --shadow-lg:     0 10px 24px rgba(17, 17, 17, 0.08);
    --shadow-focus:  0 0 0 3px rgba(192, 133, 82, 0.25); /* primary-500 @ 25% — для :focus-visible */

    /* ---------- Motion ---------- */
    --duration-fast:   120ms;
    --duration-base:   180ms;
    --duration-slow:   240ms;
    --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

    /* ---------- Z-index ---------- */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-drawer:   800;
    --z-modal:    900;
    --z-toast:    1000;

    /* ---------- Control heights (производные) ---------- */
    --control-height-sm: 36px;
    --control-height-md: 46px; /* все основные кнопки/инпуты в макете */
    --control-height-lg: 52px; /* product CTA / hero CTA */
}