/* ============================================================
   CNE — EFFECTS TOKENS
   Backgrounds (REGRA DE FUNDO), glassmorphism, glow, shadows.
   INVARIANTE #1: nenhum fundo é cor chapada. Sempre profundidade.
   ============================================================ */
:root {
  /* --- Background recipes --- */
  /* DARK: degradê radial navy → preto-violeta. Sobrepor bokeh + grade. */
  --bg-dark: radial-gradient(ellipse 120% 90% at 50% 0%, #14224A 0%, #0A1530 42%, #0D0815 100%); /* @kind color */
  --bg-dark-flat: radial-gradient(ellipse at top, #0A1530 0%, #0D0815 100%); /* @kind color */
  /* CLARO: off-white. A moldura neon é aplicada por --frame-* abaixo. */
  --bg-light: #F7F8FB;
  /* TECH/CIRCUITO: dark + tom mais azulado para diagramas. */
  --bg-tech: radial-gradient(ellipse 110% 80% at 70% 10%, #122249 0%, #0A1530 55%, #0B0A1A 100%); /* @kind color */

  /* --- Moldura neon (slides claros) — borda em gradiente --- */
  --frame-fill: linear-gradient(#F7F8FB, #F7F8FB); /* @kind color */
  --frame-edge: var(--neon-spectrum); /* @kind color */

  /* --- Glassmorphism --- */
  --glass-dark-bg:   rgba(255, 255, 255, 0.06);
  --glass-dark-bg-2: rgba(255, 255, 255, 0.10);
  --glass-light-bg:  rgba(10, 21, 48, 0.04);
  --glass-blur:      blur(14px); /* @kind other */
  --glass-border:    1px solid rgba(255, 255, 255, 0.16); /* @kind other */
  --glass-border-light: 1px solid rgba(10, 21, 48, 0.10); /* @kind other */

  /* --- Glow / neon shadows --- */
  --glow-roxo:    0 0 32px rgba(123, 44, 191, 0.55);
  --glow-rosa:    0 0 32px rgba(255, 51, 102, 0.50);
  --glow-laranja: 0 0 32px rgba(255, 136, 0, 0.50);
  --glow-azul:    0 0 32px rgba(77, 184, 255, 0.55);
  --glow-gold:    0 0 28px rgba(245, 166, 35, 0.50);
  --glow-case:    0 0 26px rgba(255, 107, 26, 0.60);
  --glow-soft:    0 0 60px rgba(123, 44, 191, 0.30);

  /* --- Elevation shadows --- */
  --shadow-card:  0 18px 48px rgba(5, 9, 22, 0.45);
  --shadow-card-light: 0 16px 40px rgba(10, 21, 48, 0.12);
  --shadow-float: 0 28px 70px rgba(5, 9, 22, 0.55);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.18);

  /* --- Metallic text (números / destaques) --- */
  --metal-light: linear-gradient(180deg, #FFFFFF 0%, #C9D3E8 55%, #8FA0C4 100%); /* @kind color */
  --metal-silver: linear-gradient(180deg, #F4F7FF 0%, #AEB9D4 60%, #6C7AA0 100%); /* @kind color */

  /* --- Bokeh blob colors (usar com blur 80px, opacity .35) --- */
  --bokeh-1: #7B2CBF;
  --bokeh-2: #FF3366;
  --bokeh-3: #4DB8FF;
  --bokeh-4: #FF8800;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 320ms; /* @kind other */
  --dur-slow: 600ms; /* @kind other */
}

/* ------------------------------------------------------------
   Reusable background utility classes (opt-in, brand-safe)
   ------------------------------------------------------------ */
.cne-bg-dark {
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
}
.cne-bg-tech {
  background: var(--bg-tech);
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
}
/* Slide claro: SEMPRE com moldura neon. */
.cne-bg-light {
  background: var(--bg-light);
  position: relative;
  overflow: hidden;
  color: var(--text-body);
  border: var(--frame-neon) solid transparent;
  background-image: var(--frame-fill), var(--frame-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Bokeh blob helper */
.cne-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: var(--z-glow);
}