/* ============================================================
   RESTAURANT LANDING PAGE — PALETA DE COLORES
   Tema: Fine Dining Premium | Light + Warm Accents
   Para usar: var(--color-nombre)
   ============================================================ */

:root {

  /* ── ACENTO PRINCIPAL — controlado por el color switcher ── */
  --color-accent:       #B5854A;   /* ámbar dorado — default */
  --color-accent-rgb:   181,133,74;

  /* ── ACENTOS FIJOS ── */
  --accent-primary:     #B5854A;   /* dorado cálido — CTAs, precios, iconos activos  */
  --accent-secondary:   #D4A96A;   /* ámbar claro   — hover, badges, highlights      */
  --accent-warm:        #C0392B;   /* vino/tinto     — etiquetas especiales, alertas  */
  --accent-green:       #27AE60;   /* verde fresco   — badges vegano, disponibilidad  */

  /* ── FONDOS ── */
  --bg-base:            #FAF8F5;   /* crema suave — fondo raíz                       */
  --bg-surface:         #FFFFFF;   /* cards, modales                                 */
  --bg-elevated:        #F5F1EB;   /* secciones alternas, inputs                    */
  --bg-dark:            #1C1917;   /* secciones oscuras, hero, footer                */
  --bg-overlay:         rgba(28,25,23,.82); /* overlay hero, navbar scrolled         */

  /* ── TEXTOS ── */
  --text-primary:       #1C1917;   /* títulos principales                            */
  --text-body:          #44403C;   /* párrafos, texto general                        */
  --text-muted:         #78716C;   /* texto secundario, meta info                    */
  --text-dim:           #A8A29E;   /* placeholders, deshabilitado                    */
  --text-white:         #FAFAF9;   /* texto sobre fondos oscuros                     */

  /* ── BORDES ── */
  --border-light:       rgba(0,0,0,.07);
  --border-medium:      rgba(0,0,0,.12);
  --border-accent:      rgba(181,133,74,.35);

  /* ── GRADIENTES ── */
  --gradient-accent:    linear-gradient(135deg, #B5854A 0%, #D4A96A 100%);
  --gradient-dark:      linear-gradient(145deg, #1C1917, #292524);
  --gradient-hero:      linear-gradient(to bottom, rgba(28,25,23,.60) 0%, rgba(28,25,23,.35) 50%, rgba(28,25,23,.80) 100%);

  /* ── BRILLOS / SOMBRAS ── */
  --glow-primary:       rgba(181,133,74,.22);
  --glow-warm:          rgba(192,57,43,.18);
  --shadow-card:        0 4px 24px rgba(0,0,0,.06);
  --shadow-hover:       0 12px 40px rgba(0,0,0,.10);

  /* ── TIPOGRAFÍA ── */
  --font-display:       'Playfair Display', serif;
  --font-body:          'Inter', sans-serif;

  /* ── TOKENS DE DISEÑO ── */
  --radius-sm:          0.75rem;
  --radius-md:          1.25rem;
  --radius-lg:          1.5rem;
  --transition-fast:    all .25s ease;
  --transition-base:    all .35s ease;
  --transition-slow:    all .60s ease;
}

/* ============================================================
   CLASES DE UTILIDAD
   ============================================================ */

/* Textos */
.text-accent         { color: var(--accent-primary); }
.text-accent-2       { color: var(--accent-secondary); }
.text-muted-r        { color: var(--text-muted); }

/* Fondos */
.bg-surface-r        { background: var(--bg-surface); }
.bg-elevated-r       { background: var(--bg-elevated); }
.bg-dark-r           { background: var(--bg-dark); }

/* Botón principal */
.rest-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
  background: var(--color-accent);
  color: #fff;
}
.rest-btn:hover {
  box-shadow: 0 8px 30px var(--glow-primary);
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Botón secundario oscuro */
.rest-btn.dark {
  background: var(--bg-dark);
  color: #fff;
}
.rest-btn.dark:hover {
  background: var(--color-accent);
  box-shadow: 0 8px 30px var(--glow-primary);
}

/* Botón borde */
.rest-btn.outline {
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}
.rest-btn.outline:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 24px var(--glow-primary);
}

/* Botón borde blanco (para fondos oscuros) */
.rest-btn.outline-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
}
.rest-btn.outline-white:hover {
  background: #fff;
  border-color: #fff;
  color: var(--bg-dark);
}

/* Badge */
.badge-rest {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(181,133,74,.12);
  color: var(--accent-primary);
  border: 1px solid rgba(181,133,74,.25);
}

/* Separador acento */
.divider-rest {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  border: none;
  margin: 2rem 0;
}

/* Text stroke */
.text-stroke-rest { -webkit-text-stroke: 1.5px var(--color-accent); color: transparent; font-family: var(--font-display); }