/* Дарэлль — токены дизайн-системы «Коробка» v1.0
   Источник правды: docs/design/DESIGN.md. Новые цвета/радиусы только через этот файл. */

:root {
  /* Поверхности */
  --c-paper: #FFFFFF;
  --c-field: #E4F6E7;
  --c-field-warm: #F6F1EA;
  --c-field-hover: #C9EED0;
  --c-deep: #1F5C3B;

  /* Текст */
  --c-ink: #3E2A1B;
  --c-ink-2: #7C5A3F;
  --c-ink-3: #A68B73;
  --c-on-deep: #EAF5EC;

  /* Действия и акценты */
  --c-action: #1F5C3B;        /* основная кнопка, текст белый */
  --c-action-hover: #174A2F;
  --c-action-active: #123B26;
  --c-on-action: #FFFFFF;
  --c-mint: #6DCB82;          /* подсветка: плитка праздника, крышка коробки, счётчик */
  --c-mint-hover: #5FBF75;
  --c-accent: #1F5C3B;
  --c-brand-brown: #5B3F2A;

  /* Статусы */
  --c-ok: #2E8B57;      --c-ok-bg: #E8F5EC;
  --c-warn: #C98A1B;    --c-warn-bg: #FBF1DC;
  --c-err: #B3261E;     --c-err-bg: #FBEBEA;

  /* Границы */
  --c-line: #E3E8E2;
  --c-line-strong: #1F5C3B;
  --c-divider: #EEF1EC;

  /* Шрифты (локальные woff2, OFL) */
  --ff-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --ff-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Размеры шрифта */
  --fs-display: clamp(1.875rem, 4.2vw, 3rem);     /* 30–48 */
  --fs-h1: clamp(1.625rem, 3.2vw, 2.25rem);       /* 26–36 */
  --fs-h2: clamp(1.375rem, 2.4vw, 1.75rem);       /* 22–28 */
  --fs-h3: 1.125rem;
  --fs-h4: 1.0625rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .8125rem;
  --fs-price: 1.25rem;
  --fs-price-grid: 1.0625rem;
  --fs-date: 1.75rem;

  /* Интерлиньяж */
  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.55;

  /* Радиусы: 28 / 18 / 10 / 2 */
  --r-field: 28px;
  --r-tile: 18px;
  --r-control: 10px;
  --r-thumb: 12px;
  --r-tag: 2px;
  --r-box: 22px;

  /* Тени: одна на экран */
  --shadow-box: 0 18px 40px -20px rgba(62, 42, 27, .45);
  --shadow-overlay: 0 24px 48px -24px rgba(62, 42, 27, .4);
  --scrim: rgba(62, 42, 27, .5);

  /* Отступы, ритм 8px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px;
  --section-gap: 64px;
  --block-gap: 24px;

  /* Сетка */
  --container: 1200px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --grid-gap: 12px;

  /* Контролы */
  --h-control: 48px;
  --h-control-sm: 44px;
  --h-header: 56px;
  --tilt: -6deg;

  /* Движение */
  --dur-fast: 120ms;
  --dur: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Фокус */
  --focus-ring: 0 0 0 3px rgba(31, 92, 59, .18);
}

@media (min-width: 768px) {
  :root { --gutter: max(24px, env(safe-area-inset-left, 0px)); --gutter-r: max(24px, env(safe-area-inset-right, 0px)); --grid-gap: 24px; --h-header: 64px; }
}
@media (min-width: 1280px) {
  :root { --gutter: max(32px, env(safe-area-inset-left, 0px)); --gutter-r: max(32px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 767px) {
  :root { --section-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --tilt: 0deg; }
}