/* ==========================================================================
   Template 3 · CYB Command — navy profundo + ciano/azul elétrico
   Paleta referenciada no site cybline.com.br (Command Your Business):
   fundo #070D1D/#0A1730, acentos #38BDF8/#22D3EE/#0EA5E9 e o gradiente
   sky→blue (#7DD3FC → #0EA5E9 → #1D4ED8) no lugar da chama.
   A estrutura toda vem de report-base.css — aqui, só cores e a fonte
   display (Space Grotesk, a mesma da marca CYB).
   ========================================================================== */

[data-template="template-3"] {
  /* ---------- paleta da marca ---------- */
  --tpl-100: #DFF3FE;
  --tpl-150: #C7EAFD;
  --tpl-200: #7DD3FC;
  --tpl-300: #5BC8FA;
  --tpl-400: #38BDF8;
  --tpl-450: #2BB3F4;
  --tpl-460: #24ABEF;
  --tpl-475: #17A0EA;
  --tpl-core: #0EA5E9;
  --tpl-500: #0284C7;
  --tpl-600: #0369A1;
  --tpl-650: #075985;
  --tpl-700: #1D4ED8;
  --tpl-800: #1E40AF;
  --tpl-900: #1E3A8A;
  --tpl-925: #16295E;
  --tpl-950: #0A1730;
  --tpl-975: #070D1D;
  --tpl-glow: #38BDF8;
  --tpl-gold: #22D3EE;

  /* versões em componentes rgb, para os rgba() da base */
  --tpl-glow-rgb: 56, 189, 248;
  --tpl-core-rgb: 14, 165, 233;
  --tpl-400-rgb: 56, 189, 248;
  --tpl-500-rgb: 2, 132, 199;
  --tpl-200-rgb: 125, 211, 252;
  --tpl-gold-rgb: 34, 211, 238;

  /* ---------- neutros do deck ---------- */
  --tpl-ink: #070D1D;
  --tpl-ink-rgb: 7, 13, 29;
  --tpl-ink-2: #0A1730;
  --tpl-ink-deep: #04070F;
  --tpl-surface: #0D1B36;
  --tpl-surface-2: #12244A;
  --tpl-surface-3: #0B1830;
  --tpl-text: #0A1730;
  --tpl-text-rgb: 10, 23, 48;
  --tpl-text-2: #46597F;
  --tpl-text-3: #7B8BAD;
  --tpl-paper: #F5F8FD;
  --tpl-paper-2: #EAF1FA;
  --tpl-paper-3: #F8FBFE;

  /* ==========================================================================
     Ponte com o CSS base — os nomes --blue/--cyan/--flame são os que style.css
     e os componentes já usam; aqui eles passam a carregar a paleta acima.
     ========================================================================== */
  --bg: var(--tpl-ink);
  --bg-2: var(--tpl-ink-2);
  --navy: var(--tpl-surface);
  --navy-2: var(--tpl-surface-2);
  --paper: var(--tpl-surface-3);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);

  --blue: var(--tpl-core);
  --cyan: var(--tpl-400);
  --cyan-soft: rgba(var(--tpl-core-rgb), .14);
  --flame: linear-gradient(135deg, var(--tpl-200) 0%, var(--tpl-core) 46%, var(--tpl-700) 100%);
  --flame-soft: linear-gradient(135deg, rgba(var(--tpl-400-rgb), .16), rgba(var(--tpl-core-rgb), .09));
  /* o gradiente radial dos cartões do deck — 13 paradas, do tom mais claro ao preto */
  --flame-radial: radial-gradient(circle at 0% 0%,
    var(--tpl-100) 0%, var(--tpl-200) 7.6%, var(--tpl-300) 15.1%, var(--tpl-450) 22.7%, var(--tpl-475) 26.5%,
    var(--tpl-core) 30.2%, var(--tpl-700) 47.7%, var(--tpl-800) 65.1%, var(--tpl-900) 73.8%,
    var(--tpl-925) 82.6%, var(--tpl-950) 91.3%, var(--tpl-975) 95.6%, #000000 100%);

  /* neutros do design system */
  --n100: #E2EAF5;
  --n700: #46597F;

  /* semânticos — dessaturados para o acento continuar sendo o único grito */
  --green: #34D399;
  --green-deep: #10B981;
  --gold: var(--tpl-gold);
  --gold-deep: var(--tpl-glow);
  --danger: #F87171;
  --warn: #FBBF24;

  /* texto (--white é a cor de texto principal no CSS base) */
  --white: #F5F9FF;
  --gray: #9FB1D1;
  --gray-dark: #64779E;

  --radius: 20px;
  --radius-sm: 14px;
  --font: Inter, "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, -apple-system, sans-serif;
  --shadow: 0 24px 70px rgba(2, 8, 24, .55);

  /* fundo animado (lido pelo app.js) */
  --neural-line-rgb: var(--tpl-glow-rgb);
  --neural-dot: rgba(var(--tpl-gold-rgb), .30);
}

/* ---------- tipografia display — Space Grotesk, como na marca CYB ---------- */
[data-template="template-3"] h1,
[data-template="template-3"] h2,
[data-template="template-3"] .hero-title,
[data-template="template-3"] .t-slide .t-title,
[data-template="template-3"] .placar__band-val,
[data-template="template-3"] .fluxo__total-num,
[data-template="template-3"] .painel__kpi-num {
  font-family: "Space Grotesk", Inter, "Segoe UI", system-ui, sans-serif;
}

/* a banda escura do placar acompanha o navy do tema (em vez de preto puro) */
[data-template="template-3"] .placar__band:nth-child(2) { background: var(--tpl-ink-2); }