/* ==========================================================================
   Дизайн-токены FoodTruck.
   Два слоя: примитивы (--gray-*, --brand-*, --success-* …) → семантические
   алиасы. Семантика состояний (success/warning/danger/info) полностью
   отделена от бренд-акцента — раньше --warn-bg была равна --neon-bg,
   т.е. предупреждение буквально красилось в акцентный бренд-цвет.

   Все text-цвета на фоне --card/--bg проверены на контраст ≥4.5:1 (WCAG AA
   для обычного текста, включая мелкие uppercase-подписи колонок/лейблов).
   ========================================================================== */
:root {
  /* ---------- Примитивы: нейтральная тёплая шкала ---------- */
  --gray-50:  #f7f6f4;
  --gray-100: #f0ede9;
  --gray-200: #e4dfd9;
  --gray-300: #d1cac1;
  --gray-400: #a89d8f;
  --gray-500: #8a8074;
  --gray-600: #6b6255; /* контраст на белом 5.99:1 */
  --gray-700: #4a453c;
  --gray-800: #2f2b25;
  --gray-900: #1c1a16; /* контраст на белом 16.7:1 */

  /* ---------- Примитивы: бренд-акцент (буде/ит кофе: пыльно-синий + крем) ----------
     Оттенки взяты из логотипа: #8FA6BC — фирменный знак, #E8E2D5 — крем.
     Для текста/кнопок акцент затемнён до AA-контраста на белом. */
  --brand-100: #e7edf3;
  --brand-500: #8fa6bc;   /* фирменный пыльно-синий — декор, не для текста (2.5:1) */
  --cream-50:  #f4f2ec;   /* светлый крем — фон приложения */
  --cream-200: #e8e2d5;   /* крем логотипа — декор */
  --brand-600: #476a8a;   /* контраст на белом 5.68:1 */
  --brand-700: #395671;   /* 7.65:1 */

  /* ---------- Примитивы: семантика состояний (отдельно от бренда) ----------
     Суффикс -50 — светлый тинт для фона (bg), не путать с legacy-именами
     --danger-bg/--warn-bg/--ok-bg/--sky-bg ниже — те лишь ссылаются сюда. */
  --success-600: #1e7a4c; /* 5.33:1 */
  --success-50:  #e8f7ef;
  --warning-600: #8a5a0a; /* 5.38:1 */
  --warning-50:  #fbf1d9;
  --danger-600:  #d14343; /* 4.57:1 */
  --danger-50:   #fbeaea;
  --info-600:    #2f6fb3; /* 5.19:1 */
  --info-50:     #eaf2fa;

  /* ---------- Шкала отступов (база 4px) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;

  /* ---------- Радиусы ---------- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-full: 999px;

  /* ---------- Тени ---------- */
  --shadow-sm: 0 1px 2px rgba(28, 26, 22, .05), 0 1px 3px rgba(28, 26, 22, .07);
  --shadow-md: 0 4px 10px rgba(28, 26, 22, .08), 0 2px 4px rgba(28, 26, 22, .06);
  --shadow-lg: 0 16px 40px rgba(28, 26, 22, .18);

  /* ---------- Типографика ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 32px;
  --font-normal: 400; --font-medium: 500; --font-semibold: 600;
  --font-bold: 700; --font-extrabold: 800;

  /* ---------- Тач-таргеты (мобильные интерактивные элементы) ---------- */
  --tap-min: 44px;

  /* ---------- Breakpoints (справочно; синхронизировать с BREAKPOINTS в core.js) ----------
     mobile: 480px, tablet: 760px, desktop: 1024px */

  /* ==========================================================================
     Семантические алиасы под СТАРЫЕ имена переменных — этим пользуется
     существующий style.css без переименования классов/переменных (Этап 0
     плана редизайна). При файл-сплите (Этап 1) селекторы в base.css/
     components.css постепенно переходят на примитивы/новые алиасы напрямую.
     ========================================================================== */
  --bg: var(--cream-50);
  --card: #ffffff;
  --border: var(--gray-200);
  --text: var(--gray-900);
  --muted: var(--gray-600);

  --accent: var(--brand-600);
  --accent-dark: var(--brand-700);
  --accent-deep: var(--gray-900);

  --sky: var(--info-600);
  --sky-bg: var(--info-50);
  --neon: var(--brand-600);
  --neon-bg: var(--brand-100);

  --danger: var(--danger-600);
  --danger-bg: var(--danger-50);
  --warn: var(--warning-600);
  --warn-bg: var(--warning-50);
  --ok-bg: var(--success-50);
  --ok: var(--success-600);

  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);
}