/* ============================================================
   FRYDAY — Design Tokens
   Единый источник правды по цвету, типографике, отступам.
   Палитра взята с fryday.az + логотипа; фон «слоновая кость» добавлен.
   Правило: новые цвета НЕ вбиваем руками — только через эти переменные.
   ============================================================ */

:root {
  /* ---------- БРЕНД: бордовый (свёл 3 дубля #7f1d1d/#7f1d1e/#8f1d1d в один) ---------- */
  --maroon-50:  #FBEAEA;
  --maroon-100: #F4C9C9;
  --maroon-300: #C25C5C;
  --maroon-500: #9F1A16;   /* красный из логотипа («котлета») */
  --maroon-700: #7F1D1D;   /* ОСНОВНОЙ бренд-бордовый (theme-color сайта) */
  --maroon-800: #7E1710;   /* тень логотипа */
  --maroon-900: #5C1A12;   /* самая глубокая тень логотипа */
  --maroon-950: #2A0F0E;   /* тёмный бренд-фон (футер) */
  --maroon-990: #190807;   /* почти чёрный бордовый (нижняя плашка) */

  /* ---------- АКЦЕНТ: оранжевый (главный цвет бренда, лого = сайт) ---------- */
  --orange-50:  #FFF3E0;
  --orange-100: #FDE3BD;
  --orange-300: #F8B96A;   /* светлый оттенок оранжевого */
  --orange-500: #F39300;   /* ОСНОВНОЙ акцент — буквы FRYDAY */
  --orange-700: #C26F00;   /* затемнённый для hover/контраста на светлом */
  --brown-700:  #643A11;   /* коричневый из логотипа (декор/глубокий текст) */

  /* ---------- ВТОРИЧНЫЙ АКЦЕНТ: жёлтый/мёд (с сайта) ---------- */
  --honey-300:  #FDE047;
  --honey-400:  #FACC15;
  --honey-500:  #FBBF24;
  --honey-bg-1: #FEFCE8;   /* мягкая подложка */
  --honey-bg-2: #FEF3C7;

  /* ---------- НЕЙТРАЛЬНЫЕ (серая шкала с сайта, Tailwind) ---------- */
  --ink-900:    #1F2937;   /* заголовки / основной тёмный */
  --ink-700:    #374151;
  --ink-600:    #4B5563;   /* основной текст */
  --ink-400:    #9CA3AF;   /* приглушённый текст */
  --line-200:   #E5E7EB;   /* границы */
  --gray-100:   #F3F4F6;   /* светлая подложка */
  --white:      #FFFFFF;

  /* ---------- ФОН: слоновая кость (добавлен, не с сайта) ---------- */
  --ivory:      #FAF5EC;   /* основной фон страницы */
  --ivory-soft: #F4ECDD;   /* чуть глубже — секции/чередование */

  /* ---------- СЛУЖЕБНЫЙ: Wolt (только для существующей кнопки Order) ---------- */
  --wolt:       #009DE0;

  /* ============================================================
     СЕМАНТИЧЕСКИЙ СЛОЙ — пользуемся ИМ в разметке, а не цветами выше
     ============================================================ */
  --bg:            var(--ivory);
  --bg-alt:        var(--ivory-soft);
  --surface:       var(--white);      /* карточки на фоне слоновой кости */
  --text:          var(--ink-600);
  --text-strong:   var(--ink-900);
  --text-muted:    var(--ink-400);
  --text-on-brand: var(--white);
  --border:        var(--line-200);

  --brand:         var(--maroon-700);
  --brand-strong:  var(--maroon-900);

  /* тёмная тема футера */
  --footer-bg:       var(--maroon-950);
  --footer-strip:    var(--maroon-990);
  --footer-text:     #E9D9D6;
  --footer-muted:    #B79A96;
  --footer-line:     rgba(255,255,255,.10);
  --accent:        var(--orange-500);
  --accent-strong: var(--orange-700);
  --accent-2:      var(--honey-500);

  /* ---------- ТИПОГРАФИКА (Rubik для текста + Anton для дисплейных заголовков) ---------- */
  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Montserrat", "Arial Black", Impact, sans-serif;
  --fs-display: clamp(3.5rem, 16vw, 15rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --lh-tight: 1.1;
  --lh-base: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- ОТСТУПЫ / РАДИУСЫ / ТЕНИ ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31,41,55,.06), 0 1px 3px rgba(31,41,55,.10);
  --shadow-md: 0 6px 16px rgba(92,26,18,.10);
  --container: 1200px;
}