/* Hostbraza: variáveis de marca (cores, gradientes, vidros, cantos, fonte).
   Fonte oficial: https://brand.hostbraza.com.br  ·  Regras de uso: https://brand.hostbraza.com.br/llms.txt
   Gerado a partir do CSS da própria página da marca. Não redesenhe: copie.

   Como usar: carregue este arquivo antes do seu CSS e use as variáveis, por exemplo
   background: var(--gradiente);  color: var(--texto);  border-radius: var(--r-btn);
   Para o tema escuro, ponha data-theme="dark" na tag <html>. */

:root {
  --azul: #0060fe;
  --azul-claro: #0082f8;
  --azul-profundo: #1c40f2;
  --gradiente: linear-gradient(90deg, var(--azul-claro), var(--azul-profundo));
  /* Em botão, o gradiente começa no Azul Hostbraza: o Azul Claro não segura texto branco pequeno. */
  --gradiente-botao: linear-gradient(90deg, var(--azul), var(--azul-profundo));
  /* Véu marinho por cima do gradiente, para texto branco pequeno passar de 4,5:1. */
  --veu: rgba(0, 16, 66, 0.22);
  /* Cinza de texto para fundo Gelo: o Grafite ali dá 4,4:1, abaixo do mínimo. */
  --grafite-forte: #63636b;
  --obsidiana: #0a0b0f;
  --grafite: #71717a;
  --geada: #e7e7ea;
  --gelo: #f3f5fb;
  --neve: #ffffff;

  /* Brilho Braza: fundos escuros com clarões nos três azuis, sempre sobre a Obsidiana. */
  --brilho-horizonte: radial-gradient(120% 85% at 50% 118%, rgba(28, 64, 242, 0.95) 0%, rgba(0, 96, 254, 0.5) 30%, rgba(0, 96, 254, 0) 64%),
    radial-gradient(55% 45% at 88% -5%, rgba(0, 130, 248, 0.26), rgba(0, 130, 248, 0) 70%), var(--obsidiana);
  --brilho-canto: radial-gradient(75% 95% at 100% 0%, rgba(28, 64, 242, 0.85) 0%, rgba(0, 96, 254, 0.3) 42%, rgba(0, 96, 254, 0) 72%),
    radial-gradient(50% 60% at 0% 100%, rgba(0, 130, 248, 0.2), rgba(0, 130, 248, 0) 70%), var(--obsidiana);
  --brilho-feixe: linear-gradient(115deg, rgba(28, 64, 242, 0) 38%, rgba(28, 64, 242, 0.6) 56%, rgba(0, 130, 248, 0.3) 63%, rgba(0, 130, 248, 0) 80%),
    #15171d;

  /* Três vidros, cada um com um papel. Fosco: o padrão, para tudo que tem texto. */
  --vidro-filtro: blur(28px) saturate(180%);
  --vidro-claro: rgba(255, 255, 255, 0.62);
  --vidro-claro-borda: rgba(255, 255, 255, 0.7);
  --vidro-escuro: rgba(10, 11, 15, 0.55);
  --vidro-escuro-borda: rgba(255, 255, 255, 0.14);
  /* Líquido: peças pequenas sobre gradiente ou foto. */
  --liquido-filtro: blur(12px) saturate(190%);
  --liquido-tinta: rgba(0, 16, 66, 0.16);
  --liquido-borda: rgba(255, 255, 255, 0.55);
  --liquido-brilho: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 24px rgba(255, 255, 255, 0.12);
  /* Azul: um destaque por tela. */
  --vidro-azul-filtro: blur(22px) saturate(160%);
  --vidro-azul-tinta: linear-gradient(135deg, rgba(0, 130, 248, 0.46), rgba(28, 64, 242, 0.46));
  --vidro-azul-borda: rgba(255, 255, 255, 0.28);

  /* Semânticas (não fazem parte da paleta da marca). */
  --ok: #0e7036;
  --ok-fundo: #dff5e7;
  --atencao: #9a5600;
  --atencao-fundo: #fdefd2;
  --erro: #c22727;
  --erro-fundo: #fce4e4;
  --neutro: #5f5f68;
  --neutro-fundo: #efeff2;

  --font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Cantos médios: etiqueta 6, botão e campo 10, cartão 12, painel grande 16. */
  --r-tag: 6px;
  --r-sm: 8px;
  --r-btn: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Papéis de cor da página. O tema escuro troca só estes valores. */
  --fundo: var(--neve);
  --fundo-suave: var(--gelo);
  --cartao: var(--neve);
  --linha: var(--geada);
  --texto: var(--obsidiana);
  --texto-suave: var(--grafite);
  --texto-suave-gelo: var(--grafite-forte);
  --azul-texto: var(--azul);
  --suave-fundo: rgba(0, 96, 254, 0.12);
  --suave-fundo-hover: rgba(0, 96, 254, 0.2);
  --suave-texto: var(--azul-profundo);
  --etiqueta-fundo: var(--gelo);
  --erro-forte: #c22727;
  --nav-fundo: var(--vidro-claro);
  --nav-linha: rgba(10, 11, 15, 0.08);
  --chip-fundo: rgba(10, 11, 15, 0.07);
  --chip-fundo-hover: rgba(10, 11, 15, 0.14);

  color-scheme: light;
}

/* Tema escuro: Obsidiana ao fundo. Texto e ícone azuis usam o Azul Claro; os botões seguem em Azul Hostbraza. */
:root[data-theme='dark'] {
  --fundo: #0a0b0f;
  --fundo-suave: #101218;
  --cartao: #15171d;
  --linha: #2a2d37;
  --texto: #f3f5fb;
  --texto-suave: #a1a1aa;
  --texto-suave-gelo: #a1a1aa;
  --azul-texto: var(--azul-claro);
  --suave-fundo: rgba(0, 130, 248, 0.2);
  --suave-fundo-hover: rgba(0, 130, 248, 0.3);
  --suave-texto: #8fc2ff;
  --etiqueta-fundo: rgba(0, 130, 248, 0.16);
  --nav-fundo: var(--vidro-escuro);
  --nav-linha: rgba(255, 255, 255, 0.1);
  --chip-fundo: rgba(255, 255, 255, 0.12);
  --chip-fundo-hover: rgba(255, 255, 255, 0.22);

  --ok: #3dd68c;
  --ok-fundo: #12301f;
  --atencao: #f5b83d;
  --atencao-fundo: #33260b;
  --erro: #ff6b6b;
  --erro-fundo: #3a1517;
  --neutro: #a1a1aa;
  --neutro-fundo: #1e2129;

  color-scheme: dark;
}