/* ==========================================================================
   La Bella Fiore — Sistema de Design (tokens)
   --------------------------------------------------------------------------
   Este ficheiro define as VARIÁVEIS de design do site: cores, tipografia,
   espaçamentos e sombras. Nenhum outro ficheiro deve escrever cores ou
   tamanhos "à mão" — todos consomem daqui.

   Porquê: se um dia quiseres mudar o verde da marca, mudas UMA linha
   aqui e o site inteiro acompanha. Sem isto, terias de caçar a cor
   espalhada por dezenas de sítios.

   Paleta extraída do logótipo oficial (pinheiro-manso, verde-azeitona).
   Posicionamento: restaurante-lounge, cozinha italiana, vista para o golfe.
   ========================================================================== */

:root {
  /* ---- Verde-azeitona da marca (do logótipo) ---------------------------- */
  --oliva-900: #1c1d12;  /* quase preto, para fundos profundos */
  --oliva-800: #282818;  /* cor dominante do logótipo */
  --oliva-700: #383820;
  --oliva-600: #4a4a22;  /* COR PRINCIPAL da marca */
  --oliva-500: #606028;  /* tom mais claro do gradiente do logótipo */
  --oliva-400: #7d7d3c;
  --oliva-300: #a3a370;  /* para texto secundário sobre fundo escuro */

  /* ---- Cremes e areias (fundo, respiração) ------------------------------ */
  --creme-50:  #fdfbf6;  /* fundo principal do site */
  --creme-100: #f7f2e7;  /* secções alternadas */
  --creme-200: #efe6d3;  /* separadores suaves */
  --areia-300: #ddceae;  /* bordas, molduras */

  /* ---- Latão (acento de "lounge") --------------------------------------
     Dois tons por uma razão de acessibilidade, não estética:
       --latao-500 é bonito mas só dá 3.3:1 sobre creme — chega para
         elementos decorativos e títulos grandes (a norma exige 3:1),
         NUNCA para texto pequeno.
       --latao-texto é o mesmo latão escurecido até passar 4.5:1 em todos
         os nossos fundos claros. É este que os PREÇOS usam.
     Medido, não estimado. */
  --latao-500: #a8853f;   /* decorativo: filetes, ícones, títulos grandes */
  --latao-400: #c2a05a;   /* acento sobre fundo escuro SÓLIDO */
  --latao-300: #e8d9b0;   /* acento sobre FOTOGRAFIA escurecida, ver nota */
  --latao-texto: #745c2c; /* preços e texto pequeno sobre fundo claro */
  /* Nota sobre o --latao-300: a secção de contactos tem uma fotografia
     noturna por baixo de um véu escuro. A foto tem zonas de branco puro (o
     letreiro iluminado), e nesses sítios o --latao-400 a 13px dava só
     2,7 de contraste, abaixo do mínimo de 4,5.
     Para o --latao-400 passar, o véu teria de subir a 87% de opacidade e a
     fotografia deixava de se ver. Clarear o dourado resolve sem estragar a
     imagem: este tom dá 4,8 mesmo contra o pior pixel da foto. */

  /* ---- Texto ------------------------------------------------------------ */
  --texto-forte: #23241a;  /* títulos e corpo sobre creme */
  --texto-suave: #55564a;  /* legendas, descrições de pratos */
  --texto-claro: #f7f2e7;  /* texto sobre fundo escuro */
  --texto-claro-suave: #cfc9b6;

  /* ---- Papéis semânticos (usa ESTES nos componentes) -------------------- */
  --fundo: var(--creme-50);
  --fundo-alt: var(--creme-100);
  --fundo-escuro: var(--oliva-800);
  --marca: var(--oliva-600);
  --marca-hover: var(--oliva-500);
  --acento: var(--latao-500);
  --borda: var(--creme-200);

  /* ---- Gradiente do logótipo (usar com parcimónia) ---------------------- */
  --grad-marca: linear-gradient(135deg, var(--oliva-800) 0%, var(--oliva-500) 100%);

  /* ======================================================================
     TIPOGRAFIA
     Duas famílias, a espelhar o próprio logótipo:
       - Cormorant Garamond: serifa elegante de alto contraste, irmã visual
         do lettering "La Bella Fiore". Só para títulos e números grandes.
       - Jost: sans geométrica próxima do "- Ristorante Pizzeria Lounge bar -".
         Para corpo, navegação e ementa (legível em tamanhos pequenos).
     Ambas open-source, alojadas no nosso servidor (não no Google) — ver nota
     de RGPD no README.
     ====================================================================== */
  --fonte-titulo: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --fonte-corpo: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica fluida: adapta-se ao ecrã sem saltos bruscos.
     clamp(mínimo, ideal-que-cresce-com-o-ecrã, máximo) */
  --t-hero:    clamp(2.75rem, 7vw, 6rem);
  --t-seccao:  clamp(2rem, 4.5vw, 3.5rem);
  --t-sub:     clamp(1.375rem, 2.5vw, 1.875rem);
  --t-destaque:clamp(1.125rem, 1.6vw, 1.375rem);
  --t-corpo:   1.0625rem;
  --t-peq:     0.9375rem;
  --t-micro:   0.8125rem;

  --altura-titulo: 1.1;
  --altura-corpo: 1.65;
  --espaco-letras-titulo: 0.01em;
  --espaco-letras-caixa-alta: 0.18em;  /* para pequenos rótulos em maiúsculas */

  /* ======================================================================
     ESPAÇAMENTO — escala de 4px, previsível e consistente
     ====================================================================== */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;
  --e-32: 8rem;

  /* Respiração vertical entre secções, maior no computador */
  --resp-seccao: clamp(4rem, 10vw, 8rem);

  /* ---- Larguras --------------------------------------------------------- */
  --largura-max: 1280px;
  --largura-texto: 68ch;   /* leitura confortável: nunca linhas demasiado longas */
  --recuo-lateral: clamp(1.25rem, 5vw, 4rem);

  /* ---- Cantos e sombras ------------------------------------------------- */
  --raio-p: 4px;
  --raio-m: 10px;
  --raio-g: 20px;

  --sombra-baixa: 0 1px 3px rgba(28, 29, 18, 0.07);
  --sombra-media: 0 8px 28px rgba(28, 29, 18, 0.10);
  --sombra-alta:  0 20px 60px rgba(28, 29, 18, 0.16);

  /* ---- Movimento -------------------------------------------------------- */
  --trans-rapida: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-media: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta: 640ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Camadas (evita guerras de z-index espalhadas pelo código) -------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-modal: 300;
}

/* Respeita quem pediu menos animação no sistema operativo.
   Há pessoas com sensibilidade vestibular a quem o movimento causa enjoo.
   Não é um extra: é acessibilidade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --trans-rapida: 1ms;
    --trans-media: 1ms;
    --trans-lenta: 1ms;
  }
}