/* ТуттиПицца Design Tokens — 8px grid */
:root {
  /* Brand */
  --color-white: #ffffff;
  --color-text: #1a1a1a;
  --color-tomato: #e53935;
  --color-tomato-hover: #c62828;
  --color-tomato-active: #b71c1c;
  --color-cream: #fff4e6;
  --color-basil: #43a047;
  --color-gold: #fbc02d;
  --color-success: #4caf50;
  --color-error: #f44336;

  /* Neutrals */
  --color-muted: #373737;
  --color-placeholder: #9e9e9e;
  --color-border: #eeeeee;
  --color-border-strong: #e0e0e0;
  --color-disabled-bg: #f2f2f2;
  --color-disabled-text: #bdbdbd;
  --color-zebra: #fafafa;
  --color-focus: #fbc02d;
  --color-overlay: rgba(26, 26, 26, 0.48);

  /* Typography */
  --font: "Manrope", system-ui, sans-serif;
  --h1-size: 46px;
  --h1-line: 56px;
  --h2-size: 34px;
  --h2-line: 42px;
  --h3-size: 22px;
  --h3-line: 28px;
  --body-xl-size: 18px;
  --body-xl-line: 26px;
  --body-m-size: 16px;
  --body-m-line: 24px;
  --caption-size: 13px;
  --caption-line: 16px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Elevation — Flat Design 2.0 */
  --shadow-card: 0 8px 24px rgba(26, 26, 26, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(26, 26, 26, 0.12);
  --shadow-btn: 0 4px 12px rgba(229, 57, 53, 0.28);
  --shadow-sticky: 0 -8px 24px rgba(26, 26, 26, 0.08);

  /* Spacing — 8px scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Layout */
  --container: 1440px;
  --gutter: 10px;
  --section-gap: 40px;
  --header-h: 72px;
  --cols: 4;
  --grid-gap: 16px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 180ms;
}

@media (max-width: 767px) {
  :root {
    --h1-size: 28px;
    --h1-line: 36px;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --cols: 8;
    --section-gap: 32px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 64px;
    --cols: 12;
    --section-gap: 40px;
  }
}