/* Hallmark · tokens — Каталог швейных заказов
 * theme: studied-DNA (source: prompt «Halo / USD Halo», premium fintech landing)
 * Из референса взяты: светло-серая бумага #F5F5F5, крупные скруглённые карточки,
 * pill-кнопки с белым кружком-стрелкой, тесный трекинг, 600 — самый жирный вес.
 * Под нас адаптированы: палитра (брендовый тил #3E6263 + акцент #7C3AED вместо
 * чёрного и #2B2644) и шрифт (Onest вместо платного TT Norms Pro).
 * Все цвета и шрифты на странице обязаны ссылаться на эти токены. */

:root {
  /* --- Бумага: #F5F5F5 из референса, подтонированная к брендовому тилу --- */
  --color-paper:     oklch(96.4% 0.003 196);
  --color-paper-2:   oklch(93.5% 0.005 196);
  --color-card:      oklch(99%   0.002 196);
  --color-rule:      oklch(88%   0.006 196);
  --color-muted:     oklch(55%   0.014 197);
  --color-ink:       oklch(21%   0.014 196);
  --color-ink-2:     oklch(40%   0.014 196);

  /* --- Тёмная поверхность (роль #2B2644 из референса) — глубокий брендовый тил --- */
  --color-deep:       oklch(27%   0.036 199);
  --color-deep-2:     oklch(33%   0.034 199);
  --color-deep-ink:   oklch(97%   0.005 196);
  --color-deep-muted: oklch(72%   0.014 196);

  /* --- Светлая брендовая подложка героя --- */
  --color-hero:      oklch(89%   0.026 197);
  --color-hero-2:    oklch(94%   0.016 197);
  /* Плашки поверх подложки героя: чипы категорий и карточки живой ленты */
  --color-hero-chip: oklch(97.5% 0.008 197);

  /* --- Бренд: тил #3E6263 (категории, статус-точки) --- */
  --color-primary:   oklch(46.9% 0.041 198);

  /* --- Акцент: фиолетовый строго на «Связаться с заказчиком» --- */
  --color-accent:       oklch(54.1% 0.2466 293);
  --color-accent-hover: oklch(47%   0.2400 293);
  --color-accent-ink:   oklch(98%   0.006  293);
  /* Подложка и текст блока «Количество». Пара проверена: 7.25:1 */
  --color-accent-50:    oklch(95.5% 0.035  293);
  --color-accent-700:   oklch(45%   0.22   293);

  --color-focus: oklch(59% 0.20 293);

  --shadow-toast: 0 10px 28px -12px oklch(20% 0.02 196 / 0.35);

  /* --- Шрифты: одна геометрическая гротеска (как TT Norms Pro в референсе)
         + моно только для табличных цифр в каталоге --- */
  --font-body: "Onest", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "PT Mono", "Courier New", monospace;

  /* --- Размеры: крупные тесные заголовки фин-теха --- */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-quote:   clamp(1.375rem, 1.4vw + 1rem, 1.875rem);
  --text-display-s: clamp(2rem, 2.6vw + 1rem, 3rem);
  --text-display:   clamp(2.5rem, 4.2vw + 1rem, 4rem);

  /* --- Трекинг (в референсе −0.02…−0.04em на всех заголовках) --- */
  --track-display: -0.04em;
  --track-head:    -0.03em;
  --track-tight:   -0.02em;

  /* --- Отступы (4 pt, по ролям) --- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* --- Моушн: только маркиз + переходы состояний --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 200ms;
  --dur-med:   260ms;
  --dur-marquee-cats: 38s;

  /* --- Геометрия: крупные скругления из референса --- */
  --radius-card:  1rem;    /* rounded-2xl */
  --radius-hero:  1.5rem;  /* rounded-3xl */
  --radius-input: 0.75rem;
  --radius-pill:  999px;
  --rule-hair:    1px;
  --page-gutter:  clamp(1rem, 3vw, 1.5rem);
  --page-max:     88rem;   /* max-w-[88rem] из референса */
  /* Высота карточки-шапки: 2×--space-sm padding + 44px кнопка.
     Герой вычитает её, чтобы первый экран не начинал скроллиться. */
  --nav-h:        4.25rem;

  /* --- Z-шкала --- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-toast:    500;
}