/* CAMINHO: frontend/public/shared/css/gelfs-tokens.css

   ETAPA 4 - Tokens de design da identidade visual oficial da GELFS, usados
   pelo TOTEM (frontend/public/totem/**). Cada cor/tamanho/espaçamento usado
   nas telas do totem referencia uma variável definida aqui - nenhuma tela
   deve ter uma cor "solta" em hexadecimal.

   CORES OFICIAIS (atualizado nesta etapa):
   Os valores de verde/vermelho abaixo foram EXTRAÍDOS DIRETO do material
   oficial de impressão da GELFS (arquivo "Gelfs_arquivo_Impressao_Final.pdf",
   enviado por ela - o mesmo arquivo usado no cardápio físico da loja), por
   amostragem de cor exata dos elementos vetoriais (não são um "chute"
   visual). Duas fontes dentro do mesmo arquivo:
     - a logo em si ("GELF'S sorvetes", ver frontend/public/assets/brand/) -
       usada como a cor de MARCA principal (--gelfs-green, --gelfs-red);
     - o fundo curvo verde/vermelho que aparece atrás da logo no material -
       um pouco mais escuro/saturado, usado aqui como a variante "dark"
       (--gelfs-green-dark, --gelfs-red-dark) para hover/pressed/texto de
       destaque, exatamente como as variantes -dark já eram usadas antes.
   Branco e neutros continuam sendo cores de apoio (não vêm do material) e
   não têm essa marcação. Se a GELFS um dia fornecer um manual de marca mais
   completo (com tolerância de cor formal, versão em CMYK/Pantone etc.),
   revisar só os valores abaixo - nenhuma outra tela precisa mudar. */

:root {
  /* ---------- Cor de marca (ação/destaque) ---------- */
  /* Extraído da logo oficial (letras "GELF'S"). */
  --gelfs-green: #00A85A;
  /* Extraído do fundo verde do material oficial (mais profundo que o verde
     da logo) - usado em hover/pressed e texto de destaque sobre fundo claro. */
  --gelfs-green-dark: #009335;
  --gelfs-green-light: #E0F5EB;    /* tom claro (derivado), usado em fundos suaves - não é uma cor de marca em si */

  /* Extraído do anel vermelho ao redor da logo oficial. */
  --gelfs-red: #EC3237;
  /* Extraído do fundo vermelho do material oficial. */
  --gelfs-red-dark: #FD201B;
  --gelfs-red-light: #FDE6E7;      /* tom claro (derivado), usado em avisos/erro, nunca em botão de ação principal */

  /* Azul-claro que aparece dentro do óvalo da logo oficial (atrás de
     "GELF'S" e "sorvetes") - cor de apoio oficial, disponível para detalhes/
     destaques pontuais (ex: um selo de novidade), sem uso obrigatório ainda
     em nenhum componente desta etapa. */
  --gelfs-accent-blue: #91D8F6;

  /* ---------- Branco / neutros (apoio) ---------- */
  --gelfs-white: #FFFFFF;
  --gelfs-background: #F7FBF8;     /* fundo geral das telas - branco levemente esverdeado, discreto */
  --gelfs-surface: #FFFFFF;        /* cartões/superfícies elevadas */
  --gelfs-text: #1F2A22;           /* texto principal - quase preto, com leve tom verde-acinzentado */
  --gelfs-muted: #5C6B60;          /* texto secundário/legendas */
  --gelfs-border: #DCE7DF;         /* bordas/divisores discretos */
  --gelfs-overlay: rgba(15, 26, 18, 0.55);

  /* ---------- Estado ---------- */
  --gelfs-warning: #B8860B;
  --gelfs-danger: var(--gelfs-red-dark);
  --gelfs-success: var(--gelfs-green-dark);

  /* ---------- Tipografia ---------- */
  --gelfs-font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  /* Escala pensada para leitura a ~40-80cm de distância em um totem vertical
     (referência 1080x1920) - bem maior que uma tela de admin/desktop. */
  --gelfs-font-size-display: 64px;
  --gelfs-font-size-xl: 40px;
  --gelfs-font-size-lg: 30px;
  --gelfs-font-size-md: 24px;
  --gelfs-font-size-sm: 20px;
  --gelfs-font-size-xs: 17px;

  /* ---------- Espaçamento / raio / sombra ---------- */
  --gelfs-space-xs: 8px;
  --gelfs-space-sm: 16px;
  --gelfs-space-md: 24px;
  --gelfs-space-lg: 40px;
  --gelfs-space-xl: 64px;
  --gelfs-radius-sm: 14px;
  --gelfs-radius-md: 22px;
  --gelfs-radius-lg: 32px;
  --gelfs-radius-pill: 999px;
  --gelfs-shadow: 0 12px 32px rgba(20, 60, 30, 0.14);
  --gelfs-shadow-sm: 0 4px 14px rgba(20, 60, 30, 0.10);

  /* ---------- Alvo mínimo de toque (acessibilidade) ---------- */
  --gelfs-touch-target: 88px;

  /* ---------- Transições ---------- */
  --gelfs-transition: 160ms ease;
}

/* Respeita preferência do sistema por menos movimento - nenhuma animação
   essencial depende de transição (tudo continua utilizável sem elas). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gelfs-transition: 0ms;
  }
}