/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — BRAND TOKENS v4                                      ║
   ║  Paleta extraída do logo TMC: ouro · prata · teal sobre preto        ║
   ║                                                                      ║
   ║  Papéis:                                                             ║
   ║    TEAL   → cor primária de interação (CTAs, links, "ao vivo")       ║
   ║    OURO   → conquista e premium (campeões, hall, MaskPro)            ║
   ║    PRATA  → texto, bordas e superfícies neutras                      ║
   ║                                                                      ║
   ║  Carregado DEPOIS do <style> do base.html: sobrescreve os tokens     ║
   ║  antigos (steel blue) sem precisar reescrever as 700 linhas legadas. ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

:root,
[data-theme="default"] {
  /* ── OURO — conquista, campeões, premium ───────────────────────── */
  --gold:        #D9A94C;
  --gold-hi:     #F2D493;
  --gold-deep:   #A67A28;
  --gold-dim:    rgba(217,169,76,.10);
  --gold-glow:   rgba(217,169,76,.22);

  /* ── PRATA — neutros, texto, superfícies ───────────────────────── */
  --silver:      #C2C8D0;
  --silver-hi:   #EDF0F4;
  --silver-deep: #767D87;
  --silver-dim:  rgba(194,200,208,.08);

  /* ── TEAL — primária de interação ──────────────────────────────── */
  --teal:        #4FA39D;
  --teal-hi:     #77CBC4;
  --teal-deep:   #2C6663;
  --teal-dim:    rgba(79,163,157,.10);
  --teal-glow:   rgba(79,163,157,.22);

  /* ── Mapeamento para os tokens que o site já usa ───────────────── */
  --primary:       var(--teal);
  --primary-solid: #3F8B86;
  --primary-dim:   var(--teal-dim);
  --primary-glow:  var(--teal-glow);

  --accent:    var(--silver-deep);
  --accent-hi: var(--silver);

  --premium:    var(--gold);
  --premium-hi: var(--gold-hi);

  --success:     #5FBFA0;
  --success-dim: rgba(95,191,160,.10);
  --danger:      #D9645C;
  --danger-dim:  rgba(217,100,92,.10);
  --warning:     var(--gold);
  --warning-dim: var(--gold-dim);
  --info:        var(--teal);
  --info-dim:    var(--teal-dim);

  /* ── Fundos — preto do logo ────────────────────────────────────── */
  --bg:      #060607;
  --bg1:     #0D0E10;
  --bg2:     #16181C;
  --bg-card: rgba(22,24,28,.62);

  /* ── Texto ─────────────────────────────────────────────────────── */
  --text:      #E4E7EC;
  --text-dim:  rgba(194,200,208,.56);
  --text-mute: rgba(194,200,208,.26);

  /* ── Bordas ────────────────────────────────────────────────────── */
  --border:    rgba(194,200,208,.09);
  --border-hi: rgba(194,200,208,.18);

  /* Header mais alto: com 60px o logo e a marca ficavam espremidos */
  --nav-h: 76px;

  /* ── Decorativos ───────────────────────────────────────────────── */
  --orb1-color: rgba(79,163,157,.035);
  --orb2-color: rgba(217,169,76,.022);
  --orb3-color: rgba(194,200,208,.014);
  --scan-color: rgba(79,163,157,.05);
  --dot-color:  rgba(194,200,208,.018);

  --topline-gradient: linear-gradient(90deg,
      transparent 4%,
      var(--gold) 26%,
      var(--silver-hi) 50%,
      var(--teal) 74%,
      transparent 96%);

  /* Gradiente da marca (ouro → prata → teal), igual ao logo */
  --brand-gradient: linear-gradient(100deg,
      var(--gold) 0%,
      var(--gold-hi) 18%,
      var(--silver-hi) 48%,
      var(--teal-hi) 78%,
      var(--teal) 100%);
}

/* ── Blackout — OLED true black ──────────────────────────────────── */
[data-theme="blackout"] {
  --gold:      #E4B45C;
  --gold-hi:   #F7E0AA;
  --silver:    #D2D8E0;
  --silver-hi: #F5F7FA;
  --teal:      #63B8B1;
  --teal-hi:   #8FDDD6;

  --primary:   var(--teal);
  --premium:   var(--gold);
  --accent-hi: var(--silver);

  --bg:      #000000;
  --bg1:     #060607;
  --bg2:     #0E0F12;
  --bg-card: rgba(14,15,18,.72);

  --text:      #F0F2F5;
  --text-dim:  rgba(210,216,224,.58);
  --text-mute: rgba(210,216,224,.28);

  --border:    rgba(210,216,224,.08);
  --border-hi: rgba(210,216,224,.16);
}