/* =============================================================
   OCA RESTAURANTE & GRILL — Colors & Type
   "Sabor de casa, praticidade no seu dia"
   Brand system by Fenice Lab · 2026
   -------------------------------------------------------------
   A identidade da Oca é DIRETA E QUENTE: um vermelho-brasa vivo
   (apetite, fogo, energia do grill) sobre o qual o logotipo "OCA"
   aparece em branco com sombra preta deslocada — força e impacto,
   linguagem de churrasco/grill. Preto carvão dá o contraste; um
   âmbar-brasa derivado evoca a grelha.
   -------------------------------------------------------------
   CORES PRINCIPAIS — lidas direto da logo oficial (chapada/flat,
   leitura de alta confiança): Vermelho OCA, Preto OCA, Branco.
   As demais (vermelho escuro, grafite, âmbar-brasa, neutros) são
   DERIVADAS FUNCIONAIS pro Design System — estados, fundos, texto.
   -------------------------------------------------------------
   FONTS (Google Fonts, gratuitas — padrão Fenice):
   Anton (display, impacto condensado, casa com o "OCA") +
   Barlow (corpo/UI, condensada esportiva como o "RESTAURANTE & GRILL").

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet">
   ============================================================= */

:root {
  /* ---- PRIMARY (da logo) ------------------------------------- */
  --vermelho:     #ED1C24;   /* Vermelho OCA — primária: fogo, apetite, energia */
  --preto:        #141414;   /* Preto OCA — sombra do logotipo, base de contraste */
  --branco:       #FFFFFF;   /* Branco — letras "OCA" e "&" */

  /* ---- SECONDARY / DERIVADAS --------------------------------- */
  --vermelho-dk:  #B71419;   /* Vermelho Profundo — hover, bordas ativas */
  --vermelho-700: #8E0F13;   /* Vermelho Carvão — pressed / fundos escuros quentes */
  --grafite:      #2B2B2B;   /* Grafite Grill — superfícies escuras, cards escuros */
  --grafite-dk:   #1A1A1A;   /* Carvão Noturno — rodapés, fundos profundos */
  --brasa:        #F6A21E;   /* Âmbar Brasa — acento quente (grelha), destaques/voz */

  /* ---- NEUTROS / SUPERFÍCIES --------------------------------- */
  --bg:           #FFFFFF;
  --bg-alt:       #FAF6F1;   /* Creme — off-white quente, fundo apetitoso */
  --fg-1:         #1A1A1A;   /* texto principal */
  --fg-2:         #6B6660;   /* texto secundário */
  --linha:        #ECE6DF;   /* divisores */

  /* ---- GRADIENTES -------------------------------------------- */
  --grad-marca:    linear-gradient(135deg, #ED1C24 0%, #B71419 100%);
  --grad-profundo: linear-gradient(180deg, #2B2B2B 0%, #141414 100%);
  --grad-brasa:    linear-gradient(135deg, #F6A21E 0%, #ED1C24 100%);

  /* ---- ALIASES de marca (usados pelo wrapper/DS) ------------- */
  --marca:        var(--vermelho);
  --marca-dk:     var(--grafite-dk);
  --marca-md:     var(--grafite);
  --marca-soft:   var(--vermelho-dk);
  --marca-voz:    var(--brasa);

  /* ---- TIPOGRAFIA -------------------------------------------- */
  --font-display: 'Anton', 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  /* ---- ESPAÇAMENTO ------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

  /* ---- RAIO --------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;
}