/* ═══════════════════════════════════════════════════════════════════════
   WearGroup · дизайн-токены
   ТЗ §8, DS-01/DS-02. Единственное место, где живут значения.
   Компоненты не придумывают свои размеры — они берут их отсюда.

   Порядок: примитивы → семантика → шкалы. Компонент обращается к семантике
   (--text-secondary), а не к примитиву (--gray-60): тогда смена палитры
   не превращается в поиск по всем файлам.

   Родство с ПО: почти монохромное поле, белый фон, графитовый текст,
   сдержанный индиго как единственный системный акцент, green/amber/red
   только для семантики состояния. Сайт — не копия внутреннего приложения:
   на публичных страницах та же палитра работает с большей типографикой
   и большим воздухом.
   ═══════════════════════════════════════════════════════════════════════ */

:root{

  /* ── Примитивы цвета ────────────────────────────────────────────────
     Тёплая нейтральная шкала: ткань, а не пиксели. Холодный серый рядом
     с экрю и графитом читается как «айти-панель», а не как производство. */
  --c-white:      #FFFFFF;
  --c-paper:      #FAF9F7;
  --c-sand-50:    #F7F5F2;
  --c-sand-100:   #F2EFEA;
  --c-sand-200:   #ECE9E4;
  --c-sand-300:   #DDD8CE;
  --c-greige-400: #C9C3B8;
  --c-greige-500: #B9AFA3;
  --c-stone-600:  #8B8378;
  --c-stone-700:  #6E675E;
  --c-graphite:   #3A3733;
  --c-ink:        #1E1E1E;

  --c-indigo-700: #2E3C59;
  --c-indigo-600: #39496B;
  --c-indigo-500: #48597F;
  --c-indigo-100: #E7EAF1;

  --c-green-600:  #2E7D5B;
  --c-green-100:  #E4F0EA;
  --c-amber-600:  #8A6410;
  --c-amber-100:  #F7EEDC;
  --c-red-600:    #90353D;
  --c-red-100:    #F4E5E6;

  /* ── Поверхности ──────────────────────────────────────────────────── */
  --surface-page:      var(--c-white);
  --surface-raised:    var(--c-white);      /* карточка на странице */
  --surface-sunken:    var(--c-sand-50);    /* подложка фото, пустые зоны */
  --surface-muted:     var(--c-sand-100);   /* полосы таблиц, вторичные блоки */
  --surface-inverse:   var(--c-ink);        /* тёмные плашки */
  --surface-selected:  var(--c-indigo-100);
  --surface-overlay:   rgba(20,20,20,.45);  /* фон модального окна */
  --surface-scrim:     rgba(255,255,255,.96); /* липкая шапка */

  /* ── Текст ────────────────────────────────────────────────────────── */
  --text-primary:   var(--c-ink);
  --text-secondary: var(--c-stone-700);
  --text-tertiary:  var(--c-greige-500);
  --text-inverse:   var(--c-white);
  --text-accent:    var(--c-indigo-600);
  --text-on-dark-secondary: rgba(255,255,255,.66);

  /* ── Границы ──────────────────────────────────────────────────────── */
  --border-subtle:   var(--c-sand-200);   /* разделители, рамки полей */
  --border-strong:   var(--c-greige-400); /* акцентная рамка, hover */
  --border-inverse:  var(--c-ink);
  --border-accent:   var(--c-indigo-600);
  --border-width:    1px;
  --border-width-strong: 1.5px;

  /* ── Семантика состояния ──────────────────────────────────────────────
     Цвет никогда не единственный сигнал: рядом всегда текст или символ
     (ТЗ §18, A11Y-02). Токен ...-fg рассчитан на контраст с ...-bg. */
  --status-ok-fg:      var(--c-green-600);
  --status-ok-bg:      var(--c-green-100);
  --status-warn-fg:    var(--c-amber-600);
  --status-warn-bg:    var(--c-amber-100);
  --status-error-fg:   var(--c-red-600);
  --status-error-bg:   var(--c-red-100);
  --status-info-fg:    var(--c-indigo-600);
  --status-info-bg:    var(--c-indigo-100);
  --status-neutral-fg: var(--c-stone-700);
  --status-neutral-bg: var(--c-sand-100);

  /* ── Шаг сетки ────────────────────────────────────────────────────────
     База 4 px. Всё, что между шагами, — ошибка, а не тонкая настройка. */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;
  /* Боковое поле страницы. Прежний 4vw на 1728px раздувался до ~70px и
     создавал ощущение «всё огромное» (§10.1); клампы по спеке §10.5:
     desktop 32–40, tablet 20–24, mobile 16. */
  --gutter: clamp(16px, 2.5vw, 40px);

  /* ── Радиусы ──────────────────────────────────────────────────────────
     Почти прямые углы: производственный документ, а не мобильное приложение.
     Крупные скругления у каждого блока — признак типового SaaS (DS-05). */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ── Тени ─────────────────────────────────────────────────────────────
     Только там, где слой действительно над страницей. */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(30,30,30,.06);
  --elevation-2: 0 8px 24px rgba(30,30,30,.10);
  --elevation-3: 0 14px 34px rgba(30,30,30,.14);

  /* ── Типографика ──────────────────────────────────────────────────────
     Golos Text — основной гротеск, JetBrains Mono — артикулы, коды,
     числа и пантоны. Шкала одна на сайт; «на пиксель меньше» не бывает. */
  --font-sans: 'Golos Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  15px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 23px;
  --text-4xl: 28px;
  --text-5xl: 34px;
  /* редакционные заголовки публичных страниц тянутся по ширине экрана */
  --text-display:  clamp(28px, 3.2vw, 44px);
  --text-headline: clamp(22px, 2.4vw, 30px);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    800;

  --tracking-tight: -0.01em;
  --tracking-mono:  .02em;
  --tracking-caps:  .07em;

  /* ── Плотность ────────────────────────────────────────────────────────
     Три режима из ТЗ. Compact — таблицы и размерные матрицы, Standard —
     фильтры и поля, Object — строки позиций и заявок с изображением. */
  --density-compact-h:  34px;
  --density-compact-px: var(--space-5);
  --density-compact-fs: var(--text-xs);

  --density-standard-h:  42px;
  --density-standard-px: var(--space-6);
  --density-standard-fs: var(--text-sm);

  --density-object-h:  52px;
  --density-object-px: var(--space-8);
  --density-object-fs: var(--text-md);

  /* ── Контролы ─────────────────────────────────────────────────────── */
  --control-h:        var(--density-standard-h);
  --control-px:       var(--density-standard-px);
  --control-fs:       var(--density-standard-fs);
  --control-radius:   var(--radius-0);
  --control-border:   var(--border-width) solid var(--border-subtle);
  --control-bg:       var(--c-white);
  --control-bg-hover: var(--c-sand-50);
  --control-bg-selected: var(--c-ink);
  --control-fg-selected: var(--c-white);
  --control-disabled-opacity: .38;
  /* минимальная зона нажатия на мобильном (A11Y-03) */
  --touch-min: 44px;

  /* ── Иконки ───────────────────────────────────────────────────────────
     Оптически одинаковый вес: обводка 1.7 при 24-й сетке. */
  --icon-xs: 14px;
  --icon-sm: 17px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.7;

  /* ── Движение ─────────────────────────────────────────────────────────
     Motion объясняет смену контекста и ничего не украшает: без bounce,
     без масштабирования карточек, минимальное перемещение (DS-04). */
  --motion-micro:     120ms;
  --motion-component: 160ms;
  --motion-panel:     200ms;
  --ease-standard: cubic-bezier(.2,.7,.3,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);

  /* ── Фокус и выделение ────────────────────────────────────────────────
     Фокус виден независимо от hover и не совпадает с ним по рисунку. */
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--c-indigo-600);
  --focus-ring-offset: 2px;
  --selection-border:  var(--c-ink);
  --selection-bg:      var(--c-ink);
  --selection-fg:      var(--c-white);

  /* ── Слои ─────────────────────────────────────────────────────────── */
  --z-sticky:  40;
  --z-header:  80;
  --z-panel:   78;
  --z-drawer:  95;
  --z-overlay: 90;
  --z-modal:   200;
  --z-toast:   300;

  /* ── Совместимость ────────────────────────────────────────────────────
     Старые имена оставлены как синонимы: страницы переезжают на токены
     постепенно, по мере редизайна каждого экрана (ТЗ §22, этапы 2–5).
     Новые правила эти имена не используют. */
  --bg:       var(--surface-page);
  --surface:  var(--surface-sunken);
  --line:     var(--border-subtle);
  --greige:   var(--c-greige-500);
  --ink:      var(--c-ink);
  --indigo:   var(--c-indigo-600);
  --accent-l: var(--c-indigo-500);
  --accent-d: var(--c-indigo-700);
  --text2:    var(--text-secondary);
  --sans:     var(--font-sans);
  --mono:     var(--font-mono);

  /* ── Измеряемое рантаймом ─────────────────────────────────────────────
     --hh считает высоту шапки, --vvh/--vvb — видимую область мобильного
     браузера; их выставляет shared.js. Значения здесь — стартовые. */
  --hh:  60px;
  --vvh: 100svh;
  --vvb: 0px;
}

@media (max-width: 767px){
  :root{
    --hh: 56px;
    /* на телефоне контролы крупнее: палец, а не курсор */
    --density-standard-h: var(--touch-min);
    --density-compact-h:  38px;
  }
}

@media (prefers-reduced-motion: reduce){
  :root{ --motion-micro:1ms; --motion-component:1ms; --motion-panel:1ms; }
}