/*
 * Design tokens — единый источник правды для всего проекта.
 * Подключать первым перед любыми другими CSS-файлами.
 */

:root {
  /* ── Brand colours ── */
  --red:          #e63946;
  --red-hover:    #c92a37;
  --red-light:    #fdecea;

  /* Primary action: зелёный (add-to-cart, finish-order) */
  --green:        #27ae60;
  --green-hover:  #219150;

  /* Secondary action: оранжевый только для Cart FAB / нейтральных back-кнопок */
  --orange:       #f97316;
  --orange-hover: #ea6c0a;

  /* ── Neutrals ── */
  --dark:         #1a1a2e;
  --body:         #374151;
  --gray:         #6b7280;
  --gray-light:   #94a3b8;
  --border:       #e2e8f0;
  --border-light: #f1f5f9;

  /* ── Surfaces ── */
  --bg:           #ffffff;
  --bg-muted:     #f8fafc;
  --bg-subtle:    #f3f4f6;
  --white:        #ffffff;

  /* ── Typography scale ── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* ── Font stack ── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Radius ── */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow:    0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, .18);

  /* ── Transitions ── */
  --transition: 0.18s ease;

  /* ── Layout ── */
  --max-w-content: 860px;
  --max-w-wide:    1280px;
}