/* ============================================================
   STARKS — ЕДИНЫЕ ДИЗАЙН-ТОКЕНЫ (источник истины)

   Потребители:
     1. Мобильный шаблон сайта   /local/templates/starks_mobile/css/tokens.css
        (копия — синхронизируется скриптом tools/sync-tokens.sh, править здесь)
     2. Прототип дизайн-системы  design-system/prototype.html
     3. Всё, что появится позже (мини-аппы, лендинги)

   Правка здесь = синхронная правка везде.
   Зеркало в карточках системы: foundations/colors.html — обновлять при правке!

   Происхождение: система «ПроСвет» (структура и интерактивные приёмы)
   + айдентика действующего сайта starks-wear.ru (акцент #dc2f2f)
   + дисциплина макета заказчика «Паспорт изделия · Титан» (сдержанность).
   ============================================================ */

:root{

  /* ---------- БРЕНД ----------
     ГЛАВНОЕ ПРАВИЛО: один акцент на экран.
     Красным выделяется ровно одно целевое действие. Всё остальное — графит.
     На действующем сайте красный делает пять работ сразу (ссылки категорий,
     размер, кнопка, «Подробнее», индикатор таба) и поэтому не работает нигде. */
  --sw-accent:      #dc2f2f;                  /* целевое действие, выбранный размер, таб корзины */
  --sw-accent-ink:  #ffffff;                  /* текст на акценте */
  --sw-accent-dim:  rgba(220,47,47,.09);      /* подложка выбранного состояния */

  --sw-graphite:    #2b2f33;                  /* иконки, рамки, баннеры, вторичные действия */
  --sw-graphite-ink:#ffffff;

  /* ---------- СМЫСЛОВЫЕ ----------
     Не считаются акцентом: сообщают состояние, а не зовут нажать. */
  --sw-ok:          #2f8f4e;                  /* наличие, «в корзине», шаг пройден */
  --sw-warn:        #a86118;                  /* предупреждение */
  --sw-danger:      #8f2020;                  /* ошибка — намеренно темнее бренда,
                                                 иначе неотличима от акцента */

  /* ---------- НЕЙТРАЛИ (светлая тема) ----------
     Смещены в холодный сталистый тон: это мир мотоэкипировки,
     и красный на таких нейтралях звучит чище, чем на тёплых. */
  --sw-bg:          #f3f4f4;                  /* фон экрана */
  --sw-surface:     #ffffff;                  /* карточки, панели, шапка, меню */
  --sw-shot:        #f7f8f8;                  /* подложка под фото товара */
  --sw-fg:          #16181a;                  /* основной текст */
  --sw-fg-2:        #3c4247;                  /* вторичный текст */
  --sw-hint:        #71767b;                  /* подсказки, неактивное */
  --sw-line:        rgba(22,24,26,.13);       /* границы контролов */
  --sw-line-soft:   rgba(22,24,26,.07);       /* разделители внутри карточек */

  /* ---------- ГЕОМЕТРИЯ ----------
     Компромисс: у ПроСвета 11/14, у макета «Титан» — нули.
     Взята середина: магазин не выглядит чертежом, но и не расплывается. */
  --sw-r:           10px;                     /* кнопки, инпуты, чипы, степперы */
  --sw-r-lg:        14px;                     /* карточки, шторки, панели */
  --sw-r-pill:      999px;                    /* круглые кнопки, бейджи-счётчики */

  /* ---------- ОТСТУПЫ ----------
     Шаг 4px. Больше значений не заводить — иначе шкала перестаёт быть шкалой. */
  --sw-s-1:         4px;                      /* внутри строки: иконка ↔ текст */
  --sw-s-2:         8px;                      /* между родственными элементами */
  --sw-s-3:         12px;                     /* внутри карточки */
  --sw-s-4:         14px;                     /* поля экрана, паддинг карточек */
  --sw-s-5:         20px;                     /* между смысловыми группами */
  --sw-s-6:         28px;                     /* между разделами экрана */

  /* ---------- ЭРГОНОМИКА ---------- */
  --sw-tap:         44px;                     /* минимальный тап-таргет, не уменьшать */
  --sw-fab:         50px;                     /* FAB «назад» */
  --sw-bar:         50px;                     /* высота кнопки-бара действия */

  /* ---------- ШРИФТЫ ----------
     Ноль загружаемых шрифтов: сайт на общем хостинге Beget,
     каталог уже отдаётся за ~1.5 с. Моноширинный несёт интонацию
     «паспорта изделия» бесплатно. */
  --sw-font:        -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sw-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- ТЕНИ ----------
     Только для плавающих элементов. Карточки в потоке — границей, не тенью. */
  --sw-lift:        0 4px 14px rgba(10,12,14,.28);   /* FAB, кнопка-бар, приподнятый таб */
  --sw-lift-soft:   0 2px 8px  rgba(10,12,14,.16);   /* мелкие плавающие контролы */
  --sw-sheet:       0 -8px 28px rgba(10,12,14,.18);  /* шторки снизу */

  /* ---------- ДВИЖЕНИЕ ----------
     Короткое и функциональное. Всё, что дольше 260 мс, ощущается как тормоз. */
  --sw-dur:         200ms;
  --sw-dur-sheet:   260ms;
  --sw-ease:        cubic-bezier(.22,.68,.36,1);
}

/* ---------- ТЁМНАЯ ТЕМА ----------
   Не инверсия: акцент осветлён, чтобы держать контраст на тёмном,
   графит меняется местами с чернилами. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sw-accent:      #f04a4a;
    --sw-accent-dim:  rgba(240,74,74,.16);
    --sw-graphite:    #dfe3e5;
    --sw-graphite-ink:#16181a;

    --sw-ok:          #4bb56e;
    --sw-warn:        #d59042;
    --sw-danger:      #e05b5b;

    --sw-bg:          #141617;
    --sw-surface:     #1b1e20;
    --sw-shot:        #f7f8f8;                /* фото товара всегда на светлом */
    --sw-fg:          #f2f3f3;
    --sw-fg-2:        #c3c8cb;
    --sw-hint:        #8b9196;
    --sw-line:        rgba(242,243,243,.16);
    --sw-line-soft:   rgba(242,243,243,.09);

    --sw-lift:        0 4px 14px rgba(0,0,0,.60);
    --sw-lift-soft:   0 2px 8px  rgba(0,0,0,.50);
    --sw-sheet:       0 -8px 28px rgba(0,0,0,.55);
  }
}

/* Ручное переключение темы должно побеждать системную — в обе стороны. */
:root[data-theme="dark"]{
  --sw-accent:#f04a4a; --sw-accent-dim:rgba(240,74,74,.16);
  --sw-graphite:#dfe3e5; --sw-graphite-ink:#16181a;
  --sw-ok:#4bb56e; --sw-warn:#d59042; --sw-danger:#e05b5b;
  --sw-bg:#141617; --sw-surface:#1b1e20; --sw-shot:#f7f8f8;
  --sw-fg:#f2f3f3; --sw-fg-2:#c3c8cb; --sw-hint:#8b9196;
  --sw-line:rgba(242,243,243,.16); --sw-line-soft:rgba(242,243,243,.09);
  --sw-lift:0 4px 14px rgba(0,0,0,.60);
  --sw-lift-soft:0 2px 8px rgba(0,0,0,.50);
  --sw-sheet:0 -8px 28px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion: reduce){
  :root{ --sw-dur:0ms; --sw-dur-sheet:0ms; }
}