/* КРАФТТ — дизайн-токены.
   Фирменные цвета: чёрный, тёплый золотой свет, светлое дерево, зелень.
   Правило: в разметке используются только семантические токены (--surface, --text, --accent...).
   Сырые цвета из палитры напрямую не применяются — так перекрасить сайт можно в одном месте. */

:root {
  /* ── Палитра: чёрный ──────────────────────────────────────────────
     Чёрный тёплый, не синий: он должен дружить с золотым светом. */
  --brand-ink-900: #0a0908;   /* глубокий фон, подвал */
  --brand-ink-800: #121110;   /* основной тёмный фон */
  --brand-ink-700: #1c1a17;   /* приподнятая поверхность, карточка */
  --brand-ink-600: #2a2723;   /* границы на тёмном */

  /* ── Палитра: тёплый золотой свет ─────────────────────────────────
     Свет витрины. Это акцент и подсветка, а не заливка больших площадей. */
  --brand-gold-100: #f7e4bf;  /* блик, текст на тёмном */
  --brand-gold-300: #edc67f;  /* мягкое свечение */
  --brand-gold-500: #d9a24b;  /* основной акцент */
  --brand-gold-700: #a9762c;  /* нажатое состояние, тень акцента */

  /* ── Палитра: светлое дерево ──────────────────────────────────────
     Теперь работает не как фон, а как цвет текста и тёплых деталей на тёмном. */
  --brand-wood-100: #f6efe3;  /* светлый фон страницы */
  --brand-wood-200: #ece0cc;  /* вторичная поверхность */
  --brand-wood-400: #d3b78e;  /* дерево средней тональности, разделители */
  --brand-wood-600: #9d7c4f;  /* тёмное дерево, подписи */

  /* ── Палитра: зелень ──────────────────────────────────────────────
     Свежесть и «живая еда». Второй акцент, уравновешивает золото. */
  --brand-green-200: #cdddc0;
  --brand-green-500: #5c8a4a;  /* основной зелёный */
  --brand-green-700: #3c5c31;  /* тёмный, для текста на светлом */

  /* ── Семантика: тёмная тема (основная, как вывеска) ───────────────── */
  --surface:          var(--brand-ink-800);
  --surface-raised:   var(--brand-ink-700);
  --surface-sunken:   var(--brand-ink-900);
  --border:           var(--brand-ink-600);

  --text:             var(--brand-wood-100);
  --text-muted:       #b9ab95;
  --text-on-accent:   var(--brand-ink-900);

  --accent:           var(--brand-gold-500);
  --accent-hover:     var(--brand-gold-300);
  --accent-pressed:   var(--brand-gold-700);
  --accent-soft:      rgba(217, 162, 75, 0.14);

  --accent-2:         var(--brand-green-500);
  --accent-2-soft:    rgba(92, 138, 74, 0.16);

  /* Свечение витрины: тёплый ореол под первым экраном и карточками. */
  --glow-warm: radial-gradient(60% 60% at 50% 40%, rgba(237, 198, 127, 0.22), transparent 70%);

  /* ── Типографика ──────────────────────────────────────────────────
     Название набирается шрифтом, логотип не рисуется. */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --logo-weight:  700;
  --logo-tracking: 0.18em;   /* утверждено 19.08.2026 */
  --logo-transform: uppercase;

  /* ── Ритм и форма ─────────────────────────────────────────────────── */
  --step-1: 0.5rem;  --step-2: 1rem;   --step-3: 1.5rem;
  --step-4: 2.5rem;  --step-5: 4rem;   --step-6: 6rem;
  --radius-sm: 6px;  --radius-md: 12px; --radius-lg: 20px;
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Светлых секций больше нет: страница тёмная целиком (решение 19.08.2026).
   На тёмном фоне еда выглядит аппетитно, на бежевом бледнеет.
   Ритм задаётся не сменой фона, а глубиной: --surface, --surface-raised, --surface-sunken. */

/* ── Логотип-надпись ─────────────────────────────────────────────────
   Только кириллица: КРАФТТ. Латиница KRAFFT не используется нигде. */
.logotype {
  font-family: var(--font-display);
  font-weight: var(--logo-weight);
  letter-spacing: var(--logo-tracking);
  text-transform: var(--logo-transform);
  color: var(--brand-gold-100);
  /* «Объём» вывески: мягкая внутренняя тень + тёплое свечение вокруг. */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(237, 198, 127, 0.28);
}

body { background: var(--surface); color: var(--text); font-family: var(--font-text); }