/* ==========================================================================
   Sushi Market — Design Tokens
   Единственный источник правды для цветов, типографики, отступов и т.д.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap");

:root {
  /* ---------- Цвет: бренд ---------- */
  --color-brand-50:  #FCF1ED;
  --color-brand-100: #F9E6DF;
  --color-brand-500: #B63928;   /* основной цвет бренда (логотип, CTA, цена, активные состояния) */
  --color-brand-600: #922D20;   /* hover */
  --color-brand-700: #7A241A;   /* active / pressed */
  --color-salmon-400: #FF8E74;  /* акцент на тёмном фоне (подвал, промо) */

  --color-wasabi-100: #EAF4DE;
  --color-wasabi-500: #6FA83A;   /* «вегетарианское», успех */
  --color-wasabi-700: #4C7A24;

  --color-amber-100:  #FEF0D2;
  --color-amber-500:  #F5A524;   /* «хит», рейтинг */
  --color-amber-700:  #A8680A;

  /* ---------- Цвет: нейтральные («нори» и «рис») ---------- */
  --color-nori-900: #261D24;     /* основной текст, тёмные блоки */
  --color-nori-700: #43363E;
  --color-nori-500: #675B63;     /* вторичный текст */
  --color-nori-300: #A39AA0;     /* placeholder, disabled */

  --color-rice-0:   #FFFFFF;
  --color-rice-50:  #F8F4EF;     /* фон страницы */
  --color-rice-100: #F1EAE2;     /* фон полей, плашек */
  --color-rice-200: #E6DCD0;     /* границы */

  /* ---------- Цвет: системные ---------- */
  --color-error-500: #D92D20;
  --color-error-100: #FDE4E1;
  --color-info-500:  #2E7DD7;
  --color-info-100:  #E1EEFC;

  /* ---------- Семантические роли ---------- */
  --bg-page:        var(--color-rice-50);
  --bg-surface:     var(--color-rice-0);
  --bg-muted:       var(--color-rice-100);
  --bg-inverse:     var(--color-nori-900);
  --text-primary:   var(--color-nori-900);
  --text-secondary: var(--color-nori-500);
  --text-disabled:  var(--color-nori-300);
  --text-inverse:   var(--color-rice-0);
  --text-accent:    var(--color-brand-500);
  --border-default: var(--color-rice-200);
  --border-strong:  var(--color-nori-300);
  --focus-ring:     0 0 0 3px rgba(182, 57, 40, .28);

  /* ---------- Типографика ---------- */
  --font-heading: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;

  /* ---------- Отступы (шаг 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

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

  /* ---------- Тени ---------- */
  --shadow-sm: 0 1px 2px rgba(38, 29, 36, .06);
  --shadow-md: 0 6px 20px rgba(38, 29, 36, .08);
  --shadow-lg: 0 16px 40px rgba(38, 29, 36, .14);
  --shadow-cta: 0 8px 20px rgba(182, 57, 40, .32);

  /* ---------- Лэйаут ---------- */
  --container-max: 1200px;
  --gutter: 1rem;
  --header-h: 64px;
  --tap: 44px;            /* минимальная зона нажатия */
  --cart-bar-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Движение ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;

  /* ---------- Z-index ---------- */
  --z-header: 50;
  --z-drawer: 80;
  --z-toast:  100;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 72px; }
}