/* =========================================================================
   MYFOREXFX — tema "futuro" (camada aditiva, opt-in)
   =========================================================================
   Isto é CSS por cima do app, não uma reescrita. Ele NUNCA redeclara
   display/visibility de portão (.auth-gate, #appShell, .visible) nem toca
   em nenhum id/classe funcional além de redefinir cor/tipografia — o app
   inteiro já é orientado a custom properties (--bg, --surface, --accent,
   --bull, --bear, --gold, --font-display/body/mono), então a maior parte
   do retema acontece só redefinindo essas variáveis sob o seletor de
   opt-in [data-fx-theme="futuro"], setado pelo loader de 1 linha em
   app.html (ver comentário lá) somente quando ?tema=futuro é usado.

   Regra de especificidade: os blocos de variáveis/overrides abaixo ficam
   FORA de @layer de propósito — @layer sempre perde de regra não-cameada
   em empate de cascata, e o app.html não usa @layer nenhuma, então uma
   redefinição de variável em camada nunca venceria a de :root. Só o que é
   inteiramente novo (a assinatura "onda") fica dentro de @layer fx-tema,
   porque não compete com nenhuma regra existente. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. paleta + tipografia — redefine as variáveis que o app já usa ---------- */
html:root[data-fx-theme="futuro"] {
  /* nomes do briefing, expostos também com seus próprios nomes pra leitura/depuração */
  --ink-900: #0A0A0C;
  --ink-800: #0D1424;
  --halo:    #4C7DFF;
  --signal-up:   #2DE1A3;
  --signal-down: #FF4D6D;
  --mist:    #8DA0C0;
  --fx-gold: #E8B04B;
  --fx-on-halo: #04122B; /* texto escuro legível sobre botão halo/accent */

  /* variáveis reais que o app consome em toda parte */
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: #101A30;
  --ink: #E9EEFB;
  --ink-muted: var(--mist);
  --rule: #1B2740;
  --accent: var(--halo);
  --accent-soft: rgba(76,125,255,0.16);
  --gold: var(--fx-gold);
  --gold-soft: rgba(232,176,75,0.14);
  --bull: var(--signal-up);
  --bull-soft: rgba(45,225,163,0.14);
  --bear: var(--signal-down);
  --bear-soft: rgba(255,77,109,0.16);
  --cta-buy-ink: #04231A;
  --cta-sell-ink: #2B0810;
  --warn-ink: var(--fx-gold);
  --shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.6);
  --font-display: 'Space Grotesk', 'Rajdhani', var(--font-body);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
}

/* ---------- 2. os poucos lugares que usam hex fixo em vez de variável ----------
   (mesma técnica: seletor com o atributo de opt-in na frente, especificidade
   maior que a regra original, então vence sem !important e sem tocar no
   arquivo fonte.) */
html:root[data-fx-theme="futuro"] .auth-tabs button.active,
html:root[data-fx-theme="futuro"] .auth-submit {
  color: var(--fx-on-halo);
}
html:root[data-fx-theme="futuro"] .replicar-original-frame-box {
  background: #05070D;
}
html:root[data-fx-theme="futuro"] #schoolBlock {
  background: linear-gradient(165deg, rgba(76,125,255,.10), var(--surface) 38%, rgba(232,176,75,.08));
}
/* Stop nunca menos legível que alvo: mesmo peso tipográfico pros dois */
html:root[data-fx-theme="futuro"] .setup-value {
  font-weight: 700;
}

/* ---------- 3. reforço de tabular-nums em todo número (o app já cobre a
   maior parte; isto é rede de segurança, não redefine formato/valor) ---------- */
html:root[data-fx-theme="futuro"] .kpi-value,
html:root[data-fx-theme="futuro"] .tech-price,
html:root[data-fx-theme="futuro"] .tech-chg,
html:root[data-fx-theme="futuro"] .gauge-score,
html:root[data-fx-theme="futuro"] .setup-value,
html:root[data-fx-theme="futuro"] .out-value,
html:root[data-fx-theme="futuro"] .rr-val,
html:root[data-fx-theme="futuro"] .stat-value,
html:root[data-fx-theme="futuro"] .risk-hero-value,
html:root[data-fx-theme="futuro"] .risk-hero-sub,
html:root[data-fx-theme="futuro"] .session-countdown,
html:root[data-fx-theme="futuro"] .paywall-price {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

/* =========================================================================
   4. camada aditiva — só a assinatura nova (a onda). Nada aqui compete com
   regra existente, então pode viver em @layer com segurança.
   ========================================================================= */
@layer fx-tema {

  .fx-wave-wrap {
    width: 100%;
    height: 40px;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    background: var(--ink-800, var(--surface));
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .fx-wave-wrap[data-fx-in="1"] {
    opacity: .68;
    transform: none;
  }
  .fx-wave {
    display: block;
    width: 100%;
    height: 100%;
  }
  .fx-wave-path {
    fill: none;
    stroke: var(--mist, var(--ink-muted));
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .fx-wave-node circle {
    fill: var(--ink-900, var(--bg));
    stroke: var(--mist, var(--ink-muted));
    stroke-width: 1.4;
  }
  .fx-wave-node text {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    fill: var(--mist, var(--ink-muted));
    text-anchor: middle;
  }
  .fx-wave-wrap[data-fx-bias="bull"] .fx-wave-path,
  .fx-wave-wrap[data-fx-bias="bull"] .fx-wave-node circle { stroke: var(--signal-up, var(--bull)); }
  .fx-wave-wrap[data-fx-bias="bull"] .fx-wave-node text { fill: var(--signal-up, var(--bull)); }
  .fx-wave-wrap[data-fx-bias="bear"] .fx-wave-path,
  .fx-wave-wrap[data-fx-bias="bear"] .fx-wave-node circle { stroke: var(--signal-down, var(--bear)); }
  .fx-wave-wrap[data-fx-bias="bear"] .fx-wave-node text { fill: var(--signal-down, var(--bear)); }

  /* pulso curto (opacity apenas) quando o viés muda — nunca top/width/box-shadow */
  .fx-wave-wrap.fx-pulse { animation: fxWavePulse .7s ease; }
  @keyframes fxWavePulse {
    0% { opacity: .3; }
    45% { opacity: 1; }
    100% { opacity: .68; }
  }

  @media (max-width: 480px) {
    .fx-wave-wrap { height: 30px; }
    .fx-wave-node text { font-size: 7px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fx-wave-wrap {
      transition: none;
      opacity: .68;
      transform: none;
    }
    .fx-wave-wrap.fx-pulse { animation: none; }
  }
}