/* =============================================================
   GALINHA DO DINIZ · Tokens do design system
   Cinco Ribeiras · Angra do Heroísmo · Ilha Terceira · Açores

   De onde vem cada valor:
   · #FFA024 medido pixel a pixel nos 8 ficheiros de logótipo
     (Asset Brutos/LOGOS/*.png). É a laranja exata da marca.
   · #F7EEDB medido no Menu_JULHO_2026_v3.pdf.
   · #F46D23 e #FBE202 medidos nos 14 posts de Facebook
     (Asset Brutos/POST de Facebook/). A marca tem DUAS laranjas.
   · Tipografia: os PDFs de menu encaixam DIN Pro (corpo) e
     Barlow Condensed (títulos). Barlow Condensed é gratuita e está
     no Google Fonts; a DIN Pro é comercial e foi substituída pela
     Barlow, mesma superfamília, mesmo esqueleto de grotesca.

   MOBILE-FIRST: os valores base são os de telemóvel.
   Só os tamanhos de display escalam, via clamp().
   ============================================================= */


/* ---------- 1. FONTES -------------------------------------------------
   Produção: auto-alojar com @fontsource, nunca por CDN, um pedido a
   fonts.googleapis.com atrasa o LCP e é um terceiro a mais no RGPD.
     npm i @fontsource/barlow @fontsource/barlow-condensed
   Só o subconjunto latin. Duas famílias, uma superfamília:
     Barlow Condensed  600 700   → títulos, preços, etiquetas
     Barlow            400 500 600 → corpo e interface
   --------------------------------------------------------------------- */

:root {
  --fonte-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --fonte-corpo:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Opcional, uso ÚNICO por página: o cartaz de feira / tourada à corda.
     É a terceira família, só entra se ganhar o lugar dela.
       npm i @fontsource/new-amsterdam                                    */
  --fonte-cartaz: "New Amsterdam", "Barlow Condensed", sans-serif;


  /* ---------- 2. COR, escalas de marca ------------------------------

     LARANJA · a cor da marca. O 400 (#FFA024) é o valor medido no
     logótipo: não arredondar, não "afinar". Os restantes degraus são
     derivados dele em hsl(34 …).                                        */
  --laranja-50:  #FFF6EA;  --laranja-100: #FFE9CE;  --laranja-200: #FFD29C;
  --laranja-300: #FFBC64;  --laranja-400: #FFA024;  --laranja-500: #F2890A;
  --laranja-600: #D4740A;  --laranja-700: #A85A0C;  --laranja-800: #7E440F;
  --laranja-900: #57300E;  --laranja-950: #331C08;

  /* CARVÃO · neutros quentes. Puxados para h=34 (a matiz da laranja),
     senão ficam mortos ao lado do creme. O 900 é o preto do texto do
     logótipo, aquecido o suficiente para não vibrar sobre papel.         */
  --carvao-50:  #FAF7F3;  --carvao-100: #F1EBE2;  --carvao-200: #E0D7C9;
  --carvao-300: #C2B6A4;  --carvao-400: #9C8F7C;  --carvao-500: #776B5A;
  --carvao-600: #5C5345;  --carvao-700: #443D33;  --carvao-800: #2E2922;
  --carvao-900: #1C1813;  --carvao-950: #100D0A;

  /* CREME · o papel. #F7EEDB é a cor dos painéis do menu impresso.
     É o que dá o tom de tasca, sem ele o site fica uma cadeia de
     fast-food qualquer.                                                  */
  --creme-claro: #FDF8EF;  --creme: #F7EEDB;  --creme-escuro: #EADFC6;

  /* CARTAZ · a SEGUNDA laranja da marca. #F46D23 medido em 5 posts de
     Facebook de datas diferentes, é consistente, não é acidente de JPEG.
     É mais escura e mais vermelha que a do logótipo: hsl(21 90% 55%)
     contra hsl(34 100% 57%).

     As duas laranjas dão 1,46:1 uma contra a outra, encostadas lêem-se
     como um erro de impressão. NUNCA se tocam: entre elas vai sempre
     creme, carvão ou uma fotografia.

     Divisão de trabalho:
       --laranja-400  a MARCA. Logótipo, botões, superfícies pequenas.
       --cartaz-500   SUPERFÍCIES GRANDES. Fundos de secção, gradientes,
                      os raios de sol, as capas sociais.
     O 800 é o único degrau que aguenta texto branco ou creme (5,2:1 /
     4,5:1), ver a nota sobre os cartazes na secção 4.                  */
  --cartaz-50:  #FEF2EC;  --cartaz-100: #FCDFCF;  --cartaz-200: #F9BF9F;
  --cartaz-300: #F69E6F;  --cartaz-400: #F58447;  --cartaz-500: #F46D23;
  --cartaz-600: #E1580E;  --cartaz-700: #C04B0C;  --cartaz-800: #B84A12;
  --cartaz-900: #7F330A;  --cartaz-950: #502007;

  /* AMARELO · a linha de destaque dos cartazes ("A PARTIR DAS 10H").
     Medido em #FBE202. SÓ SOBRE ESCURO: 14,1:1 sobre --noite, mas 1,2:1
     sobre creme e 2,3:1 sobre a laranja-cartaz. Fora de fundo escuro,
     não existe.                                                         */
  --amarelo: #FBE202;

  /* RAIOS · o motivo de sol por trás do produto, nos cartazes e no painel
     "GALINHA DELICIOSA" do menu impresso. É a laranja-cartaz aclarada
     ~8%, nunca uma cor nova.                                            */
  --raios: var(--cartaz-400);

  /* Estado de abertura. Sempre acompanhados de texto, nunca a cor
     sozinha a dizer se a casa está aberta.                               */
  --aberto:  #0F7337;  --aberto-fundo:  #E6F4EC;   /* 5,25:1, #157F3F dava 4,47 */
  --fechado: #A8321E;  --fechado-fundo: #FBECE9;


  /* ---------- 3. PAPÉIS SEMÂNTICOS, modo claro (predefinido) --------
     A página é CREME. Os cartões é que são brancos. A laranja aparece
     em superfícies pequenas e em botões, nunca a toda a largura: em
     áreas grandes deixa de ser um sinal de ação e passa a ser decoração.
     O mesmo princípio do menu impresso, fundo escuro, painéis creme,
     laranja só nos cabeçalhos e nos preços.                              */
  --fundo:        var(--creme-claro);
  --fundo-alt:    var(--creme);
  --superficie:   #FFFFFF;
  --superficie-2: var(--carvao-50);

  --texto:        var(--carvao-900);
  --texto-suave:  var(--carvao-600);
  --texto-fraco:  var(--carvao-500);

  /* --borda é DECORATIVA (1,4:1): separadores de linha, divisórias.
     --borda-forte define um CONTROLO interativo e tem de cumprir 3:1,
     carvão-300 só dava 1,9:1, por isso desce a carvão-500 (4,9:1).      */
  --borda:        var(--carvao-200);
  --borda-forte:  var(--carvao-500);

  --marca:        var(--laranja-400);   /* preenchimentos */
  --marca-hover:  var(--laranja-500);
  --marca-ativa:  var(--laranja-600);
  --marca-texto:  var(--laranja-700);   /* laranja EM TEXTO sobre claro */
  --sobre-marca:  #FFFFFF;              /* texto POR CIMA da laranja, ver secção 4 */

  /* Blocos escuros dentro da página clara (hero, menu, rodapé). */
  --noite:        #17130F;
  --noite-2:      #211B15;
  --noite-texto:  #F4EEE4;


  /* ---------- 4. CONTRASTE ---------------------------------------------

     TEXTO BRANCO SOBRE LARANJA, decisão do cliente, assumida.
     --sobre-marca é #FFFFFF. Os números, medidos, são estes:

         branco sobre --laranja-400 #FFA024 ........ 2,04:1
         branco sobre --cartaz-500  #F46D23 ........ 2,98:1
         branco sobre --cartaz-800  #B84A12 ........ 5,22:1  (cumpre AA)

     Os dois primeiros ficam abaixo do mínimo da norma (4,5:1 para
     texto normal, 3:1 para texto grande). É o aspeto dos cartazes da
     casa e é o que se vai usar. Em troca:

       · Texto branco sobre laranja só em CORPO GRANDE E PESADO,
         títulos, preços, rótulos de botão. Nunca em texto corrido,
         nunca abaixo de 17px (o tamanho do corpo), peso mínimo 600.
       · Blocos longos de texto vão para creme ou para --noite,
         onde o contraste é confortável.
       · Se algum ecrã precisar mesmo de texto claro pequeno sobre
         laranja, usar --cartaz-800: é o único degrau que cumpre.

     A REGRA QUE SE MANTÉM, porque é de legibilidade e não de norma:

     LARANJA #FFA024 SOBRE CREME = 1,93:1  →  invisível.
        Não serve para texto, nem para anel de foco, nem para bordas.
        Em fundo claro a laranja de texto é --marca-texto (4,80:1)
        e o anel de foco é escuro (ver --anel-foco).

     Sobre fundo escuro (--noite) a laranja passa a 9,07:1 e pode ser
     texto à vontade. É por isso que o menu impresso resulta.           */
  --anel-foco:        var(--carvao-900);   /* em fundo claro */
  --anel-foco-escuro: var(--laranja-300);  /* em fundo escuro */
  --anel-espessura:   3px;
  --anel-desvio:      2px;


  /* ---------- 5. TIPOGRAFIA ------------------------------------------
     Corpo a 17px, não 16px: o público é largo, muitas vezes lê ao sol
     numa fila de roulote, e metade do conteúdo são preços e horários.   */
  --t-xs:   0.8125rem;   /* 13px, notas de rodapé, alergénios      */
  --t-sm:   0.9375rem;   /* 15px, meta, etiquetas, legendas        */
  --t-base: 1.0625rem;   /* 17px, corpo                            */
  --t-lg:   1.1875rem;   /* 19px, corpo destacado, preço em lista  */
  --t-xl:   clamp(1.375rem, 1.20rem + 0.9vw, 1.625rem);
  --t-2xl:  clamp(1.750rem, 1.45rem + 1.5vw, 2.250rem);
  --t-3xl:  clamp(2.250rem, 1.70rem + 2.7vw, 3.250rem);
  --t-4xl:  clamp(2.750rem, 1.90rem + 4.2vw, 4.500rem);

  --peso-normal: 400;  --peso-medio: 500;
  --peso-semi:   600;  --peso-forte: 700;

  --lh-apertado: 1.05;  /* display em Barlow Condensed          */
  --lh-titulo:   1.15;
  --lh-corpo:    1.6;

  /* Condensadas NÃO se apertam como as de largura normal. Em caixa
     alta pequena precisam de ABRIR, senão as hastes colam-se.           */
  --track-cartaz:   -0.01em;  /* display ≥ 40px          */
  --track-titulo:    0;
  --track-etiqueta:  0.08em;  /* caixa alta ≤ 15px       */

  --medida: 65ch;             /* comprimento máximo de linha de texto */


  /* ---------- 6. ESPAÇO, escala de 4px ------------------------------ */
  --s-1: 4px;    --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 96px;   --s-10: 128px;

  /* Ar entre secções: mobile primeiro. */
  --seccao:    var(--s-7);   /* 48px  */
  --seccao-lg: var(--s-9);   /* 96px  */


  /* ---------- 7. RAIO ------------------------------------------------
     O logótipo tem terminais redondos e a galinha é orgânica. Os botões
     em cápsula não são um capricho, são a citação do lettering.        */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-full: 999px;


  /* ---------- 8. SOMBRA ----------------------------------------------
     Tingidas de castanho (rgb 44 32 18), não de preto: sobre creme uma
     sombra neutra lê-se cinzenta e suja o papel.                        */
  --sombra-sm: 0 1px 2px  rgb(44 32 18 / 0.08);
  --sombra-md: 0 4px 14px rgb(44 32 18 / 0.10);
  --sombra-lg: 0 14px 36px rgb(44 32 18 / 0.16);


  /* ---------- 9. MOVIMENTO ------------------------------------------- */
  --dur-rapida: 150ms;  --dur-media: 220ms;  --dur-lenta: 320ms;
  --ease-entra: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out */
  --ease-sai:   cubic-bezier(0.4, 0, 1, 1);         /* ease-in  */


  /* ---------- 10. LAYOUT --------------------------------------------- */
  --max-w:      1180px;
  --max-w-texto: 720px;
  --gutter:     var(--s-4);   /* 16px em mobile */
  --alvo-toque: 44px;         /* mínimo absoluto */
  --alvo-cta:   52px;         /* botão de ligar  */

  /* Altura da barra fixa inferior, para reservar espaço no <body>. */
  --barra-fixa: calc(64px + env(safe-area-inset-bottom, 0px));
}


/* ---------- 11. TABLET / DESKTOP -------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter:  var(--s-6);
    --seccao:  var(--s-8);
  }
}
@media (min-width: 1024px) {
  :root {
    --seccao:    var(--s-9);
    --seccao-lg: var(--s-10);
  }
}


/* ---------- 12. BLOCOS ESCUROS · FORA DE USO --------------------------
   NÃO há modo escuro, e desde 30-09-2026 também não há blocos escuros:
   por decisão do cliente a página é toda em tons claros, com a laranja
   como única cor forte. A classe .em-noite fica aqui documentada para o
   caso de voltar atrás, mas NÃO está a ser usada em lado nenhum.

   O registo escuro existia porque o menu impresso da casa é escuro com
   painéis creme. Se um dia se retomar, é para o hero, o cabeçalho do
   menu e o rodapé, nunca a página inteira.
   Dentro de um bloco escuro mudam duas coisas, e só duas:
     · a laranja da marca sobe a 9,07:1 e pode ser texto
     · o anel de foco passa a --anel-foco-escuro
   ---------------------------------------------------------------------- */
.em-noite {
  background: var(--noite);
  color: var(--noite-texto);
  --texto: var(--noite-texto);
  --texto-suave: var(--carvao-300);
  --texto-fraco: var(--carvao-400);
  --borda: rgb(255 255 255 / 0.12);
  --borda-forte: rgb(255 255 255 / 0.28);
  --marca-texto: var(--laranja-400);
  --anel-foco: var(--anel-foco-escuro);

  /* As SUPERFÍCIES também mudam: um cartão branco dentro de um bloco
     escuro parece um erro de montagem. */
  --superficie:   #2A231C;
  --superficie-2: #332B22;
  --fundo-alt:    var(--noite-2);

  /* E os estados: o verde e o vermelho de fundo claro desaparecem aqui. */
  --aberto:  #5FD08A;  --aberto-fundo:  rgb(95 208 138 / 0.16);
  --fechado: #F0A28A;  --fechado-fundo: rgb(240 162 138 / 0.16);
}


/* ---------- 13. BASE --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Sempre em modo claro. "only light" impede o Chrome Android, o Samsung
   Internet e o Opera de escurecerem a página por conta própria. */
:root { color-scheme: only light; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--fundo); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--lh-apertado);
  letter-spacing: var(--track-titulo);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--medida); }

img, video, svg { max-width: 100%; height: auto; display: block; }

/* Nunca remover o foco sem substituto. Em fundo claro o anel é ESCURO,
   a laranja da marca sobre creme dá 1,93:1 e não cumpre os 3:1.         */
:focus-visible {
  outline: var(--anel-espessura) solid var(--anel-foco);
  outline-offset: var(--anel-desvio);
  border-radius: var(--r-sm);
}

/* Qualquer elemento a que se toca. */
a, button, [role="button"], summary, input, select {
  min-height: var(--alvo-toque);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ---------- 14. UTILITÁRIOS MÍNIMOS ------------------------------------ */
.gd-container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gd-seccao { padding-block: var(--seccao); }

/* Grelha responsiva sem uma única media query. */
.gd-grelha {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.gd-etiqueta {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-semi);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-etiqueta);
  color: var(--marca-texto);
}

.gd-so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}