/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  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="dark"] {
  /* ── 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);
  /* Nomes antigos ainda usados por algumas telas (suporte, personalizar perfil) */
  --green: var(--success);
  --neon:  var(--teal-hi);
  --red:   var(--danger);
  --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%);

  /* Mesma marca em laço (começa e termina em ouro): para textos com brilho
     animado — o background repete sem emenda. Usar com background-size 200%. */
  --brand-gradient-loop: linear-gradient(100deg,
      var(--gold) 0%, var(--gold-hi) 14%, var(--silver-hi) 30%, var(--teal-hi) 50%,
      var(--silver-hi) 70%, var(--gold-hi) 86%, var(--gold) 100%);
}

/* ── Tema claro ─────────────────────────────────────────────────────
   Mesma marca sobre papel frio: o ouro e o teal ficam mais fundos para
   dar leitura em fundo claro; "-hi" continua sendo a versão de destaque
   (aqui, mais escura). Os apelidos (--primary, --premium, --green...)
   apontam para estes valores sozinhos. */
[data-theme="light"] {
  --gold:        #A3741A;
  --gold-hi:     #805E1B;
  --gold-deep:   #6E4D10;
  --gold-dim:    rgba(176,127,34,.12);
  --gold-glow:   rgba(176,127,34,.22);

  --silver:      #3F4855;
  --silver-hi:   #12161C;
  --silver-deep: #5E6875;
  --silver-dim:  rgba(30,38,50,.06);

  --teal:        #2A7F79;
  --teal-hi:     #1D6863;
  --teal-deep:   #174F4C;
  --teal-dim:    rgba(47,138,132,.10);
  --teal-glow:   rgba(47,138,132,.20);

  --primary-solid: #2A7A75;
  --success:     #1F8562;
  --success-dim: rgba(46,154,120,.10);
  --danger:      #B83A31;
  --danger-dim:  rgba(194,74,65,.10);

  --bg:      #EEF1F4;
  --bg1:     #FFFFFF;
  --bg2:     #F6F8FA;
  --bg-card: rgba(255,255,255,.78);

  --text:      #161B22;
  --text-dim:  rgba(22,27,34,.74);
  --text-mute: rgba(22,27,34,.56);

  --border:    rgba(20,28,40,.10);
  --border-hi: rgba(20,28,40,.18);

  --orb1-color: rgba(47,138,132,.07);
  --orb2-color: rgba(176,127,34,.06);
  --orb3-color: rgba(30,38,50,.03);
  --scan-color: rgba(47,138,132,.08);
  --dot-color:  rgba(20,28,40,.05);
}

/* Tema claro: todo campo de formulário é branco (no escuro cada tela tinha um tom
   quase igual; no claro a diferença aparecia como campo "cinza" e "branco" lado a lado) */
[data-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select):not(:disabled) {
  background-color: #fff;
}

/* Tema claro: botão principal desativado fica cinza com texto legível
   (no escuro ele só fica transparente; no claro isso some o texto branco) */
[data-theme="light"] :is(.btn-submit, .btn-create, .g-btn, .btn-primary):disabled {
  opacity: 1; background: #E3E8EC !important; color: #7D8894 !important; box-shadow: none !important;
}