/* ═══ FISH KING · TOKENS DE COR ═══
   PROPORÇÃO (nova base): o BRANCO é o fundo padrão do dia a dia — limpo, honesto,
   deixa a comida e a gravatinha respirarem. Vermelho, amarelo e teal entram como
   BLOCOS DE ACENTO (cabeçalho, faixa, moldura), não como base obrigatória.
   O CHAR/PRETO é RESERVADO: só peça premium, salmão ou anúncio de impacto — nunca a base.
   A GRAVATINHA VERMELHA #FF0000 SOBRE BRANCO é a combinação mais forte e limpa da marca.
   LEI: vermelho e teal nunca se encostam direto — branco ou amarelo faz a fronteira. */
:root{
  /* base */
  --fk-vermelho:#FF0000;   /* Vermelho Rei — a gravatinha, o logo, títulos-grito, botão principal, blocos de acento */
  --fk-teal:#2DBEA2;       /* Teal Mar — o mar é SEMPRE teal, nunca azul; ondas, rota, blocos de acento */
  --fk-amarelo:#FFD700;    /* Amarelo Fritura — pontos de luz, a divisa entre vermelho e teal, blocos de acento */
  --fk-branco:#FFFFFF;     /* Branco — FUNDO PADRÃO do sistema; a base do dia a dia, o palco da gravatinha */
  --fk-creme:#F5F0E8;      /* Creme — respiro quente: interior de card, faixa atrás de texto (alternativa ao branco) */
  --fk-char:#1A1714;       /* Char — texto de corpo e contornos 2px; como FUNDO é RESERVADO (premium/salmão/impacto) */
  --fk-kraft:#C3A180;      /* Kraft — embalagem; e o tom-base da rede sobre fundo claro */
  --fk-coral:#FF7E5F;      /* Coral Salmão — SÓ quando salmão é o assunto principal */

  /* pontos de luz — marquee de bolinhas douradas em fileira (o astral das lojas) */
  --fk-luz:#FFD700;        /* Amarelo/dourado dos pontos de luz */

  /* tons de rede — a rede é monocromática e SUSSURRA: um tom mais escuro do próprio fundo */
  --fk-rede-branco:#E4DED2;  /* rede sobre branco/creme — kraft suave, quase invisível */
  --fk-rede-vermelho:#CC0000;/* rede sobre vermelho — vermelho mais escuro */
  --fk-rede-teal:#22A38B;    /* rede sobre teal — teal mais escuro */

  /* semantic — a base é BRANCA; a cor entra em bloco de acento */
  --surface-page:var(--fk-branco);        /* fundo padrão de página/tela */
  --surface-base:var(--fk-branco);
  --surface-card:var(--fk-branco);        /* cards são brancos, contorno 2px char — a comida respira */
  --surface-respiro:var(--fk-creme);      /* respiro quente alternativo, dentro de card ou atrás de texto */
  --surface-gravatinha:var(--fk-branco);  /* gravatinha vermelha sobre branco — o par mais forte da marca */
  --surface-acento-1:var(--fk-vermelho);  /* bloco de acento vermelho */
  --surface-acento-2:var(--fk-amarelo);   /* bloco de acento amarelo (e a divisa) */
  --surface-acento-3:var(--fk-teal);      /* bloco de acento teal (o mar) */
  --surface-premium:var(--fk-char);       /* RESERVADO — premium/salmão/impacto, nunca a base */
  --surface-mar:var(--fk-teal);
  --surface-secundaria:var(--fk-kraft);   /* embalagem */
  --text-body:var(--fk-char);
  --text-invert:var(--fk-creme);
  --text-grito:var(--fk-vermelho);
  --text-narrativa:var(--fk-teal);
  --accent-luz:var(--fk-luz);
  --accent-destaque:var(--fk-amarelo);
  --action-primary-bg:var(--fk-vermelho);
  --action-primary-fg:var(--fk-creme);
  --border-contorno-cor:var(--fk-char);
}