/* ============================================================
   tokens.css — ЕДИНСТВЕННЫЙ файл, где разрешены цвета в HEX/RGBA
   и «магические» размеры. В остальных файлах — только var(--…).
   Источник чисел: инлайн-стили макета Craving Club Site.dc.html + README §1.
   Исполнителям: файл НЕ редактировать. Не хватает переменной —
   остановиться и написать Инженеру.
   ============================================================ */
:root {
  /* ---- Цвета (README §1) ---- */
  --cc-bg: #FBF1E4;            /* фон страницы, кружок VS */
  --cc-green: #00261D;         /* шапка, футер, заголовки, активная цифра степпера */
  --cc-green-button: #00281E;  /* основные кнопки */
  --cc-gold: #CB953A;          /* eyebrow, линии, звёзды, рамка ошибки поля */
  --cc-gold-focus: #D89A2B;    /* outline :focus-visible */
  --cc-ink: #163129;           /* основной тёмный текст, цена */
  --cc-body: #343A38;          /* текст абзацев */
  --cc-muted: #6B6F6D;         /* хелпер на 07 */
  --cc-muted-2: #777269;       /* подписи VS-карточки, плейсхолдеры, «Your box already has 4 jars» в PD */
  --cc-surface: #FFF9F0;       /* карточки */
  --cc-surface-2: #F1E7D8;     /* левая колонка VS-карточки */
  --cc-border: #DDCDB8;        /* рамки карточек, разделители */
  --cc-border-soft: #EDE2D0;   /* строки таблицы NUTRITION в PD */
  --cc-white: #FFFFFF;         /* текст на зелёном, фон степпера и полей */

  /* ---- Полупрозрачные (из макета) ---- */
  --cc-overlay-page: rgba(251,241,228,.45);      /* оверлей поверх драпировки */
  --cc-surface-90: rgba(255,249,240,.9);        /* фон контурных кнопок и круглых стрелок */
  --cc-bg-96: rgba(251,241,228,.96);            /* не используется (sticky-CTA отключён), оставлен для полноты */
  --cc-scrim-pd: rgba(0,38,29,.35);             /* затемнение под PD на мобиле */
  --cc-scrim-pd-desktop: rgba(0,38,29,.6);      /* затемнение под PD ≥ 900 */
  --cc-white-35: rgba(255,255,255,.35);         /* рамка соц-кнопок в футере */
  --cc-white-18: rgba(255,255,255,.18);         /* разделитель в футере */
  --cc-white-72: rgba(255,255,255,.72);         /* © в футере */
  --cc-green-06: rgba(0,38,29,.06);
  --cc-green-08: rgba(0,38,29,.08);
  --cc-green-10: rgba(0,38,29,.10);
  --cc-green-12: rgba(0,38,29,.12);
  --cc-green-14: rgba(0,38,29,.14);
  --cc-green-16: rgba(0,38,29,.16);
  --cc-green-18: rgba(0,38,29,.18);
  --cc-green-22: rgba(0,38,29,.22);
  --cc-bg-90: rgba(251,241,228,.9);             /* text-shadow H2 на 03 */
  --cc-bg-95: rgba(251,241,228,.95);            /* text-shadow подзаголовка на 03 */

  /* ---- Тени (README §1 + макет) ---- */
  --cc-shadow-card: 0 8px 24px var(--cc-green-06);
  --cc-shadow-card-08: 0 8px 24px var(--cc-green-08);     /* proof-strip 01, VS-карточка */
  --cc-shadow-card-10: 0 8px 24px var(--cc-green-10);     /* фото moments */
  --cc-shadow-btn: 0 10px 24px var(--cc-green-18);
  --cc-shadow-header: 0 8px 24px var(--cc-green-18);      /* шапка после 80 px скролла */
  --cc-shadow-menu: 0 16px 40px var(--cc-green-22);
  --cc-shadow-badge: 0 2px 6px var(--cc-green-08);        /* мини-бейджи в VS-карточке */
  --cc-shadow-jar: drop-shadow(0 8px 14px var(--cc-green-16)) drop-shadow(0 2px 4px var(--cc-green-10));
  --cc-shadow-hero: drop-shadow(6px 10px 18px var(--cc-green-22)) drop-shadow(0 2px 5px var(--cc-green-14));
  --cc-shadow-vs-img: drop-shadow(6px 14px 18px var(--cc-green-22)) drop-shadow(0 2px 5px var(--cc-green-14));
  --cc-shadow-comp: drop-shadow(0 6px 10px var(--cc-green-12));   /* s04, s06, s08 */
  --cc-shadow-comp-10: drop-shadow(0 6px 10px var(--cc-green-10)); /* s03 fountain */
  --cc-text-shadow-h2-03: 0 0 18px var(--cc-bg-90), 0 0 6px var(--cc-bg-90);
  --cc-text-shadow-p-03: 0 0 12px var(--cc-bg-95), 0 0 4px var(--cc-bg-95);

  /* ---- Радиусы ---- */
  --cc-radius: 12px;       /* карточки, кнопки, поля */
  --cc-radius-sm: 8px;     /* степпер, строка цены, мини-бейджи, пункты меню */
  --cc-radius-xs: 7px;     /* подложка лого в шапке/PD */
  --cc-radius-md: 10px;    /* подложка лого в футере, мини-макет формы на 08 */
  --cc-radius-lg: 16px;    /* модалка PD на десктопе */

  /* ---- Шрифты ---- */
  --cc-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cc-font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --cc-font-serif: 'Libre Bodoni', 'Times New Roman', Georgia, serif;

  /* ---- Сетка и размеры ---- */
  --cc-col-max: 430px;       /* мобильная колонка по центру до 899 */
  --cc-pad: 20px;            /* боковые поля */
  --cc-header-h: 50px;
  --cc-btn-h: 52px;
  --cc-tap: 44px;
  --cc-container-desktop: 960px;   /* ≥ 900 */
  --cc-container-wide: 1200px;     /* ≥ 1280 */

  /* ---- Движение (README §6) ---- */
  --cc-ease: cubic-bezier(.2,.8,.2,1);
  --cc-ease-out: cubic-bezier(.22,1,.36,1);
  --cc-dur-tap: 140ms;
  --cc-dur-card: 160ms;
  --cc-dur-fade: 240ms;
  --cc-dur-reveal: 260ms;
  --cc-dur-checkout: 320ms;
}