/* ============================================
   RESTORANU — DESIGN SYSTEM
   ============================================ */

:root {
  /* ============================================
     RESTORANU — FINAL DESIGN PALETTE
     Эталон fine-dining premium F&B
     ============================================ */

  /* --- Поверхности: ivory cream, тёплая бумага меню --- */
  --bg: #F7F1E3;            /* warm ivory cream, фон страниц */
  --bg-elev: #FFFBF0;       /* немного светлее для карточек */
  --bg-warm: #EBDEC0;       /* warm sand для тегов, картинок-placeholder */
  --bg-deep: #ECE2CD;       /* углублённая поверхность */

  /* --- Текст: espresso вместо чёрного --- */
  --ink: #1A140F;           /* глубокий espresso, body text */
  --ink-2: #4A372A;         /* warm umber, secondary */
  --ink-3: #9A8670;         /* warm taupe, tertiary */
  --line: #E5D5B3;          /* soft champagne, границы */
  --line-strong: #C9B689;   /* deeper champagne, разделители */

  /* --- Главный акцент: BORDEAUX/CLARET (винный) --- */
  --accent: #7E1A2C;        /* deep bordeaux, основной CTA */
  --accent-soft: #F1DDDF;   /* розовый для бейджей и фонов */
  --accent-deep: #561019;   /* для hover/pressed */

  /* --- Premium акцент: ANTIQUE BRASS GOLD --- */
  --gold: #B89546;          /* античная латунь, премиум-теги */
  --gold-soft: #F2E5C2;     /* soft beige-gold для светлых блоков */
  --gold-deep: #7E5E22;     /* deep brass, hover */

  /* --- Fresh акцент: DEEP FOREST GREEN --- */
  --deep: #1F4732;          /* fine-dining forest, success-CTA */
  --deep-2: #2E6044;        /* lighter forest, hover */
  --deep-soft: #DEEADC;     /* soft sage для new-тегов */

  /* --- Семантика --- */
  --success: #2A6D3F;       /* приглушённый forest для статусов */
  --warn: #B57112;          /* warm amber */
  --danger: #9B2424;        /* приглушённый bordeaux */

  /* Радиусы */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 24px;
  --r-pill: 999px;

  /* Тени */
  --sh-1: 0 1px 2px rgba(24,23,26,.04), 0 1px 0 rgba(24,23,26,.02);
  --sh-2: 0 4px 14px rgba(24,23,26,.06), 0 1px 2px rgba(24,23,26,.04);
  --sh-3: 0 18px 40px -12px rgba(24,23,26,.18), 0 4px 12px rgba(24,23,26,.06);
  --sh-4: 0 30px 60px -20px rgba(24,23,26,.30);

  /* Тайминги */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.serif {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-feature-settings: 'ss01';
  letter-spacing: -0.01em;
}

img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

/* ============================================
   КНОПКИ
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  background: var(--ink);
  color: var(--bg-elev);
}
.btn-primary:hover { background: #2c2b2f; }
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px -8px var(--accent);
}
.btn-accent:hover { background: var(--accent-deep); }
.btn-soft {
  background: var(--bg-warm);
  color: var(--ink);
}
.btn-soft:hover { background: var(--line); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--bg-warm); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }

/* ============================================
   КАРТОЧКИ / ПОВЕРХНОСТИ
   ============================================ */
.card {
  background: var(--bg-elev);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
}
.card-bordered {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

/* ============================================
   ВВОДЫ
   ============================================ */
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 11px 14px;
  font-size: 14px;
  outline: none;
  transition: border var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(24,23,26,.08);
}
.input::placeholder { color: var(--ink-3); }

/* ============================================
   ТЕГИ / БЕЙДЖИ
   ============================================ */
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag-hit { background: var(--gold-soft); color: var(--gold-deep); }
.tag-new { background: var(--deep-soft); color: var(--deep); }
.tag-premium { background: var(--accent-soft); color: var(--accent-deep); }
.tag-spicy { background: #F2DDD9; color: var(--accent-deep); }

/* ============================================
   ОБЩЕЕ
   ============================================ */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }

/* fade-in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp var(--t-med) var(--ease) both; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.pulse { animation: pulse 1.6s var(--ease) infinite; }