/* ═══════════════════════════════════════════════════════════════════════════
   TEMA UBAVOX — fonte única das cores do sistema.

   Objetivo: acabar com o hardcode. Para mudar a cor de algo em TODO o site,
   edite a variável aqui — não caçe o hex em 73 arquivos.

   Os valores são exatamente a paleta que já estava em uso (base Tailwind), então
   migrar um hex para a variável correspondente NÃO muda nada visualmente.

   Uso:  color: var(--texto-2);   background: var(--acao);   border-color: var(--borda);
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Ação (o azul-céu do sistema: links, botões primários) ───────────────── */
  --acao:          #0ea5e9;   /* sky-500  — a cor de ação dominante */
  --acao-hover:    #0284c7;   /* sky-600 */
  --acao-bg:       #e0f2fe;   /* sky-100  — realce claro */
  --acao-bg-2:     #e6f1fb;
  --acao-escuro:   #0c4a6e;   /* sky-900  — texto sobre fundo claro de ação */

  /* ── Texto (do mais forte ao mais fraco) ─────────────────────────────────── */
  --texto-1:       #0f172a;   /* slate-900 — títulos, texto forte */
  --texto-2:       #475569;   /* slate-600 — texto secundário */
  --texto-2b:      #64748b;   /* slate-500 — secundário mais claro */
  --texto-3:       #94a3b8;   /* slate-400 — hint, placeholder, metadados */
  --texto-inv:     #ffffff;   /* texto sobre fundo escuro/colorido */

  /* ── Superfícies e bordas ────────────────────────────────────────────────── */
  --superficie:    #ffffff;   /* cartões, campos */
  --fundo:         #f8fafc;   /* slate-50  — fundo da página */
  --fundo-2:       #f1f5f9;   /* slate-100 — fundo alternado, hover suave */
  --borda:         #e2e8f0;   /* slate-200 — hairline padrão */
  --borda-2:       #cbd5e1;   /* slate-300 — borda mais forte */
  --texto-4:       #334155;   /* slate-700 — texto escuro em cima de claro */
  --escuro:        #1e293b;   /* slate-800 — fundos escuros, rodapés */

  /* ── Estados ─────────────────────────────────────────────────────────────── */
  --ok:            #10b981;   --ok-bg:    #d1fae5;   --ok-escuro:    #065f46;   /* emerald */
  --erro:          #ef4444;   --erro-bg:  #fee2e2;   --erro-escuro:  #991b1b;   /* red */
  --aviso:         #f59e0b;   --aviso-bg: #fef3c7;   --aviso-escuro: #92400e;   /* amber */

  /* ── Marca (a bússola) ───────────────────────────────────────────────────── */
  --marca:         #ffc400;   /* amarelo do ícone — destaque, brilha em fundo ESCURO */
  --marca-navy:    #2b4a5f;   /* navy da agulha — fundos de destaque, faixas */
  --marca-verde:   #3f9c26;   /* verde do anel */
  --dourado:       #9c7a1e;   /* o "UB" do wordmark (legível no branco) */

  /* ── Comunidade / criador (o roxo é INTENCIONAL, não é lixo) ──────────────── */
  --comunidade:    #7c3aed;   /* violet-600 — cor do conteúdo de comunidade/criador */
}