:root {
  --color-red: #e53935;
  --color-red-dark: #c62828;
  --color-brown: #2c2419;
  --color-brown-light: #3d3429;
  --color-beige: #f5f0eb;
  --color-beige-dark: #ebe4dc;
  --color-white: #ffffff;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #c4c4c4;
  --color-gray-400: #9e9e9e;
  --color-gray-500: #757575;
  --color-gray-600: #616161;
  --color-text: #2c2419;
  --color-section-title: #33261c;
  --color-section-count: #b3a798;
  --color-product-ingredients: #8a7d70;
  --color-product-weight: #b3a798;
  --color-text-muted: #8a8580;
  --color-text-light: #a39e98;

  --color-badge-hit: #f57c00;
  --color-badge-spicy: #c9a227;
  --color-badge-new: #e53935;
  --color-badge-bestseller: #7cb342;

  --color-footer-bg: #2b2018;
  --color-footer-text: #f5f0eb;
  --color-footer-muted: #7a6a5e;

  --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Tenor Sans", Georgia, serif;

  --container-width: 1312px;
  --container-padding: 24px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 12px rgba(44, 36, 25, 0.06);
  --transition: 0.2s ease;

  /* Breakpoints (for reference in media queries) */
  /* xl: 1280px | lg: 1024px | md: 768px | sm: 576px | xs: 480px */
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 12px;
  }
}