/* ==========================================================================
   OfficeDom.kz — дизайн-токены
   Единственный источник правды по цвету, типографике, ритму и движению.
   Правило: ни один компонент не задаёт цвет, радиус или длительность
   значением. Только через переменные отсюда.
   ========================================================================== */

:root {
  /* --- Цвет: семейство Forest -------------------------------------------- */
  --forest-950: #042115;
  --forest-900: #06301F;
  --forest-800: #0A4029;

  --brand-700: #128040;
  --brand-600: #16A34A;   /* основной: кнопки, ссылки, акценты */
  --brand-500: #22C55E;   /* подсветка, акцентная часть заголовка */
  --brand-100: #C9E9D5;
  --brand-50:  #E8F5EC;   /* подложка островка категорий */

  --ink-900: #0F1512;     /* основной текст */
  --ink-700: #33403A;
  --ink-600: #55605A;     /* вторичный текст */
  --ink-400: #8A948E;     /* подписи, плейсхолдеры, артикул */

  --line:       #E3E8E4;
  --line-soft:  #EFF3F0;
  --paper:      #FFFFFF;
  --paper-soft: #F6F8F6;

  /* Семантика. НЕ акцент: только скидка и старая цена. Нигде больше. */
  --sale: #E4572E;

  /* Чужой бренд. Единственное исключение из палитры: кнопку WhatsApp узнают
     по цвету, и перекрашивать её в наш зелёный — терять узнаваемость.
     Больше нигде не применяется. */
  --whatsapp:      #25D366;
  --whatsapp-dark: #1DA851;

  /* Состояния форм */
  --ok:    var(--brand-600);
  --error: #C4382B;

  /* --- Семантические роли ------------------------------------------------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-soft);
  --bg-inverse:    var(--forest-900);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-600);
  --text-faint:    var(--ink-400);
  --text-inverse:  #FFFFFF;
  --accent:        var(--brand-600);
  --accent-bright: var(--brand-500);
  --border:        var(--line);

  /* --- Типографика -------------------------------------------------------- */
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  --step-h1:   clamp(2.5rem, 5vw, 4.25rem);
  --step-h2:   clamp(1.75rem, 3vw, 2.75rem);
  --step-h3:   clamp(1.125rem, 1.6vw, 1.375rem);
  --step-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --step-body: 1rem;
  --step-sm:   0.875rem;
  --step-xs:   0.8125rem;   /* артикул, остаток, подписи */

  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-body:    1.6;

  --tracking-display: -0.02em;
  --tracking-body:    0;

  --measure: 65ch;

  /* --- Форма: одна система радиусов на весь сайт --------------------------- */
  --r-pill:  999px;   /* кнопки, пилюли, теги */
  --r-card:  16px;    /* карточки, плитки, модалки */
  --r-input: 12px;    /* поля ввода, селекты */
  --r-media: 12px;    /* изображения товаров */

  /* --- Тень: тонирована в зелёный, не в чёрный ----------------------------- */
  --shadow-hover: 0 12px 32px rgba(6, 48, 31, 0.08);
  --shadow-pop:   0 24px 64px rgba(6, 48, 31, 0.14);
  --ring:         0 0 0 3px rgba(34, 197, 94, 0.32);

  /* --- Ритм ---------------------------------------------------------------- */
  --container: 1400px;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --header-h:        88px;
  --header-h-sticky: 64px;

  /* --- Движение: одна кривая на весь сайт ---------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --marquee-duration: 150s;

  /* --- Слои ---------------------------------------------------------------- */
  --z-header:  100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* Тёмные секции внутри светлой страницы: не смена темы, а инверсия блока.
   Компонент внутри .is-inverse не должен знать, что он на тёмном. */
.is-inverse {
  --bg:         var(--forest-900);
  --bg-alt:     var(--forest-950);
  --text:       #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-faint: rgba(255, 255, 255, 0.52);
  --border:     rgba(255, 255, 255, 0.14);
  color: var(--text);
  background: var(--bg);
}

/* Полноценная тёмная тема — второй этап. Токены под неё уже разведены
   по семантическим ролям, поэтому переопределяется только этот блок. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    --bg:         var(--forest-950);
    --bg-alt:     var(--forest-900);
    --text:       #F2F6F3;
    --text-muted: rgba(242, 246, 243, 0.72);
    --text-faint: rgba(242, 246, 243, 0.5);
    --border:     rgba(255, 255, 255, 0.12);
    --accent:     var(--brand-500);
  }
}

/* Уменьшенная анимация — это меньше движения, а не полное его отсутствие.
   Прозрачность и цвет оставляем: они объясняют смену состояния. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 100ms;
    --t-base: 140ms;
    --t-slow: 180ms;
  }
}