/* ==============================================================================
   PROJETO: Cardápio Alto Padrão
   ARQUIVO: index.less
   DESCRIÇÃO: Estilização Premium do Catálogo com Light/Dark Mode (CSS Vars)
============================================================================== */

/* -------------------------------------------------------------------------
   1. TOKENS DE DESIGN (Variáveis CSS Nativas)
------------------------------------------------------------------------- */
:root {
  /* Paleta Base Dinâmica (Alimentada pelo JS) */
  --sys-bg-light: #ffffff;
  --sys-text-light: #1a1a1a;
  --sys-dest-light: #c39b56;
  
  --sys-bg-dark: #141414;
  --sys-text-dark: #f0f0f0;
  --sys-dest-dark: #d4af37;

  /* Aplicação Padrão (Tema Claro) */
  --bg-base: var(--sys-bg-light);
  --bg-surface: var(--sys-bg-light); /* Fundo é Fundo */
  --text-main: var(--sys-text-light); /* Texto é Texto */
  --text-muted: var(--sys-text-light);
  --accent-gold: var(--sys-dest-light);
  
  /* Outros tokens */
  --accent-gold-dim: rgba(195, 155, 86, 0.15);
  --border-color: #eaeaea;
  --logo-filter: none;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Aplicação Tema Escuro (vira a chave automaticamente) */
    --bg-base: var(--sys-bg-dark);
    --bg-surface: var(--sys-bg-dark);
    --text-main: var(--sys-text-dark);
    --text-muted: var(--sys-text-dark);
    --accent-gold: var(--sys-dest-dark);
    
    /* Outros tokens escuros */
    --accent-gold-dim: rgba(212, 175, 55, 0.15);
    --border-color: #222222;
    --logo-filter: drop-shadow(0 0 1px rgba(255,255,255,0.5)) brightness(1.2); 
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.2);
  }
}

/* -------------------------------------------------------------------------
   2. MIXINS
------------------------------------------------------------------------- */
@import (reference) "_bib/mixins.less";

/* -------------------------------------------------------------------------
   3. RESET E TIPOGRAFIA
------------------------------------------------------------------------- */
/* Google Fonts carregado dinamicamente pelo JS do App Shell */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  padding-bottom: 80px; /* Espaço pro scroll no mobile */
  .rolagemVertical(var(--border-color), var(--accent-gold), transparent, 4px);
}

h1, h2, h3, .font-serif {
  font-family: var(--font-display);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   3. LAYOUT ESTRUTURAL
------------------------------------------------------------------------- */
#app {
  max-width: 1200px; /* Expansivo para Desktop/Tablets */
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--bg-surface);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
}

/* -------------------------------------------------------------------------
   4. CABEÇALHO (Logo e Evento)
------------------------------------------------------------------------- */
header.hero {
  padding: 40px 20px 30px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  
  .logo {
    width: 100%;
    max-width: 280px; /* Logo maior e imponente */
    height: auto;
    margin: 0 auto 30px;
    display: block;
    filter: var(--logo-filter);
    transition: filter 0.3s ease, max-width 0.3s ease;
    
    @media (min-width: 768px) {
      max-width: 350px; /* Ainda maior no desktop */
    }
  }
  
  h1.evento-titulo {
    font-size: 31px;
    color: var(--accent-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  
  p.evento-data {
    font-size: 17px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
  }
}

/* -------------------------------------------------------------------------
   5. LISTAGEM DO CARDÁPIO (Minimalista)
------------------------------------------------------------------------- */
.cardapio-container {
  padding: 40px 20px;
  
  /* Masonry Layout para responsividade */
  column-count: 1;
  column-gap: 40px;
  
  @media (min-width: 768px) {
    column-count: 2;
    padding: 50px 40px;
  }
  
  @media (min-width: 1024px) {
    column-count: 3;
    padding: 60px;
  }
}

.grupo {
  margin-bottom: 50px;
  break-inside: avoid; /* Evita que o grupo seja cortado no meio pela coluna */
  page-break-inside: avoid;
  background: var(--bg-base);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  
  h2.grupo-titulo {
    font-size: 29px;
    color: var(--accent-gold);
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
    
    &::after {
      content: "";
      display: block;
      width: 50px;
      height: 2px;
      background-color: var(--accent-gold);
      margin: 12px auto 0;
    }
  }

  .grupo-descricao {
    font-size: 17px;
    color: var(--text-muted);
    text-align: center;
    margin-top: -15px;
    margin-bottom: 30px;
    font-style: italic;
  }
}

.item {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-nome {
    font-size: 21px;
    font-weight: 400;
    color: var(--text-main);
  }
  
  .item-descricao {
    font-size: 17px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
  }
}

/* -------------------------------------------------------------------------
   6. ANIMAÇÕES (Loading e Skeleton)
------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade {
  animation: fadeIn 0.6s ease forwards;
}

/* Loader Minimalista */
.loader {
  display: flex;
  justify-content: center;
  padding: 50px 0;
  
  &::after {
    content: "";
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-gold-dim);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}