/* ==========================================================================
   ExtraParts — дизайн-токены (вариант A «Светлый маркетплейс»)
   Компоненты в main.css используют только эти переменные:
   чтобы поменять цвет, радиус или шрифт, правьте его здесь.
   ========================================================================== */

:root {
  /* Шрифты */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Бренд: оранжевый из текущего сайта. Текст на оранжевом — тёмный (контраст 6.6:1).
     Если нужен белый текст на кнопках — поменяйте --on-brand на #fff (контраст будет 2.6:1). */
  --brand: #f4811f;
  --brand-hover: #fa9340;
  --brand-press: #e8740f;
  --on-brand: #151a2b;
  --brand-soft: #fff1e4;
  --brand-ink: #b4530a;           /* оранжевый для текста на белом, 5:1 */

  /* Нейтральные */
  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f4;
  --line: #e3e6ec;
  --line-strong: #cbd1db;
  --ink: #151a2b;                 /* основной текст, 17:1 */
  --ink-2: #3e4658;               /* вторичный, 9.5:1 */
  --muted: #5d6679;               /* подписи, 5.8:1 на белом, 5.2:1 на фоне */
  --control-border: #828b9d;      /* рамки полей и переключателей: 3.4:1 на белом, 3:1 на --surface-3 (WCAG 1.4.11) */
  --navy: #2b3f66;                /* фирменный синий, приглушённый (вариант 2, 05.10.2026) — только через токены ниже */
  --link: #1f62aa;                /* 6.2:1 на белом, 5.6:1 на фоне */
  --focus: #1f62aa;
  --focus-ring-soft: rgba(31, 98, 170, .18);

  /* Роли поверхностей */
  --surface-media: #ffffff;       /* фон под фото товаров: белый, как на снимках */
  --surface-sunken: #f1f2f5;      /* плитки разделов на первом экране */
  --surface-sunken-hover: #eaecf0;
  --surface-inverse: var(--navy); /* подвал, кнопка чата, уведомления, «Каталог» */
  --surface-inverse-hover: #34507e;
  --on-inverse: #ffffff;
  --on-inverse-muted: #d0dcec;    /* 7.5:1 на --surface-inverse */
  --inverse-line: rgba(255, 255, 255, .12);
  --inverse-hover: rgba(255, 255, 255, .12); /* фон кнопки при наведении на тёмном */
  --icon-strong: var(--navy);     /* иконки категорий и моделей */
  --scrim: rgba(10, 16, 32, .5);  /* затемнение под меню и окнами */
  --scrim-strong: rgba(10, 16, 32, .82);

  /* Статусы наличия */
  --ok: #146c36;                  /* 6.5:1 на белом, 5.7:1 на --ok-soft */
  --ok-soft: #e6f4ea;
  --warn: #a35a00;
  --warn-soft: #fdf1dd;
  --danger: #b42318;
  --danger-soft: #fdecea;

  /* Размеры шрифта */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.25rem;    /* 20 */

  /* Радиусы и тени */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --sh-2: 0 6px 16px rgba(16, 24, 40, .08);
  --sh-3: 0 16px 40px rgba(16, 24, 40, .14);
  --sh-menu: 0 24px 48px rgba(10, 16, 32, .18);
  --sh-bar: 0 -8px 24px rgba(16, 24, 40, .08);

  /* Сетка */
  --container: 1280px;
  --gutter: 16px;
  --section-y: 40px;
  --header-h: 64px;

  /* Контекстные токены */
  --topbar-bg: var(--bg);
  --topbar-ink: var(--ink-2);
  --topbar-ink-strong: var(--ink);
  --topbar-line: var(--line);

  --header-bg: var(--surface);
  --header-ink: var(--ink);
  --header-line: var(--line);
  --header-hover: var(--surface-3);

  --field-bg: var(--surface-2);
  --field-line: var(--control-border);
  --field-ink: var(--ink);
  --field-placeholder: #636b7e;   /* 5:1 на поле */
  --field-radius: 14px;

  --chip-bg: var(--surface);
  --chip-ink: var(--ink-2);
  --chip-line: var(--line-strong);
  --chip-line-hover: var(--ink);

  --btn-radius: 12px;
  --card-radius: var(--r-lg);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --section-y: 56px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; --section-y: 64px; }
}