/* ==========================================================================
   IDENTIDADE VISUAL OFICIAL — hokpro.gg
   Versão: 2.1
   Documentação completa: IDENTIDADE_VISUAL.md (raiz do projeto)

   REGRA DE OURO: nenhum hex novo entra no código sem passar por aqui.
   Se precisar de cor nova, adicione primeiro neste arquivo, atualize a doc,
   e só depois use no CSS.
   ========================================================================== */

:root {
  /* ========== MARCA — DOURADO ========== */
  --brand-primary: #e9aa22;
  --brand-primary-light: #f9df51;
  --brand-primary-glow: #faf79c;
  --brand-primary-dark: #ac7311;
  --brand-primary-hover: #f5b733;
  --brand-primary-glow-soft: rgba(233, 170, 34, 0.25);
  --brand-primary-glow-strong: rgba(233, 170, 34, 0.5);
  --brand-primary-bg-soft: rgba(233, 170, 34, 0.04);
  --brand-primary-bg-light: rgba(233, 170, 34, 0.08);
  --brand-primary-bg-medium: rgba(233, 170, 34, 0.2);

  /* ========== MARCA — TURQUESA ========== */
  --brand-accent: #20e6e3;
  --brand-accent-light: #72f7f5;
  --brand-accent-dark: #0993a1;
  --brand-accent-hover: #48ecea;
  --brand-accent-glow-soft: rgba(32, 230, 227, 0.2);
  --brand-accent-bg-soft: rgba(32, 230, 227, 0.04);
  --brand-accent-bg-medium: rgba(32, 230, 227, 0.2);

  /* ========== GRADIENTES OFICIAIS ========== */
  --gradient-gold-metallic: linear-gradient(180deg, #f9df51 0%, #e9aa22 50%, #ac7311 100%);
  --gradient-gold-soft: linear-gradient(180deg, #f9df51 0%, #e9aa22 100%);
  --gradient-cyan-metallic: linear-gradient(180deg, #72f7f5 0%, #20e6e3 50%, #0993a1 100%);

  /* ========== NEUTROS ========== */
  --bg-base: #060a12;
  --bg-surface: #0d1320;
  --bg-elevated: #141e33;
  --border-subtle: #1a2438;
  --border-strong: #2a3856;
  /* Borda/fundo sutil sobre superfícies escuras (alpha branco 8%).
     Para borda sólida, ver --border-subtle.
     TODO Fase 5: considerar escala completa --border-faint-06/07/10/12 baseada em uso atual em style.css. */
  --border-faint: rgba(255, 255, 255, 0.08);

  /* Camadas de superfície — banner / elevada / header */
  --banner-start: #01030a;
  --banner-mid:   #020611;
  --banner-end:   #000206;
  --elevated-start: #1c2a45;
  --elevated-end:   #15202f;
  --header-bg:      #1a2740;

  /* ========== ESTADOS DECORATIVOS — exclusivos ========== */
  --bg-unavailable: #3a3a40;

  /* ========== TEXTO ========== */
  --text-primary: #e4e8f0;
  --text-secondary: #9ab0c6;
  --text-tertiary: #6b7a94;
  --text-inverse: #060a12;

  /* ========== ESTADOS SEMÂNTICOS ========== */
  --success: #22c55e;       /* duplicado em :root antigo de style.css, será consolidado na Fase 5 */
  --success-soft: rgba(34, 197, 94, 0.15);
  --error: #ef4444;
  --error-soft: rgba(239, 68, 68, 0.15);
  --warning: #f59e0b;
  --info: #3b9eff;          /* substituirá o --accent antigo na Fase 5 */

  /* ========== ALPHAS PADRONIZADOS ========== */
  --alpha-subtle: 0.04;
  --alpha-soft: 0.10;
  --alpha-medium: 0.25;
  --alpha-strong: 0.50;
  --alpha-intense: 0.80;
}