/* ==========================================================================
   Template 2 · Report Deck — Azul elétrico
   Mesma estrutura do Template 1, outra temperatura: tinta com desvio frio e
   azul elétrico como acento único. Só a paleta muda — layout, ritmo claro/escuro
   e tipografia vêm de report-base.css.

   Carregado por /js/theme.js junto de report-base.css: a base traz a estrutura
   e este arquivo declara só as cores. Para criar uma variante nova, copie este
   arquivo, troque o id no seletor e reescreva os tons --tpl-*.
   ========================================================================== */

[data-template="template-2"] {
  /* ---------- paleta da marca ---------- */
  --tpl-100: #DBEAFE;
  --tpl-150: #C7DCFD;
  --tpl-200: #BFDBFE;
  --tpl-300: #93C5FD;
  --tpl-400: #60A5FA;
  --tpl-450: #4E97F8;
  --tpl-460: #3B87F5;
  --tpl-475: #3B82F6;
  --tpl-core: #2563EB;
  --tpl-500: #1D4FD8;
  --tpl-600: #1E40AF;
  --tpl-650: #1E3A8A;
  --tpl-700: #1B3BA8;
  --tpl-800: #152C7E;
  --tpl-900: #0F2057;
  --tpl-925: #0A1740;
  --tpl-950: #060E28;
  --tpl-975: #030714;
  --tpl-glow: #3B82F6;
  --tpl-gold: #7DB3FF;

  /* versões em componentes rgb, para os rgba() da base */
  --tpl-glow-rgb: 59, 130, 246;
  --tpl-core-rgb: 37, 99, 235;
  --tpl-400-rgb: 96, 165, 250;
  --tpl-500-rgb: 29, 79, 216;
  --tpl-200-rgb: 191, 219, 254;
  --tpl-gold-rgb: 125, 179, 255;

  /* ---------- neutros do deck ---------- */
  --tpl-ink: #0A0B0F;
  --tpl-ink-rgb: 10, 11, 15;
  --tpl-ink-2: #101218;
  --tpl-ink-deep: #05060A;
  --tpl-surface: #151824;
  --tpl-surface-2: #1C2030;
  --tpl-surface-3: #12151F;
  --tpl-text: #0F1420;
  --tpl-text-rgb: 15, 20, 32;
  --tpl-text-2: #525C6B;
  --tpl-text-3: #8A93A3;
  --tpl-paper: #F2F4F8;
  --tpl-paper-2: #E9EDF4;
  --tpl-paper-3: #F5F7FB;

  /* ==========================================================================
     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: #E7E7E7;
  --n700: #4F4F4F;

  /* semânticos — dessaturados para o acento continuar sendo o único grito */
  --green: #4ADE80;
  --green-deep: #22C55E;
  --gold: var(--tpl-gold);
  --gold-deep: var(--tpl-glow);
  --danger: #F87171;
  --warn: #FBBF24;

  /* texto (--white é a cor de texto principal no CSS base) */
  --white: #F7F9FC;
  --gray: #A4ADBB;
  --gray-dark: #6B7385;

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

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