/* ==========================================================================
   Template 1 · Report Deck — Vermilion
   Paleta original do deck de referência: preto profundo com desvio quente e
   Vermilion como acento único. A estrutura toda vem 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-1"] {
  /* ---------- paleta da marca ---------- */
  --tpl-100: #FCCAAC;
  --tpl-150: #FBC4A4;
  --tpl-200: #FAAB85;
  --tpl-300: #F78B5E;
  --tpl-400: #F57842;
  --tpl-450: #F56C37;
  --tpl-460: #F26A2E;
  --tpl-475: #F35C24;
  --tpl-core: #F24C10;
  --tpl-500: #E24A0E;
  --tpl-600: #C2410C;
  --tpl-650: #9A3412;
  --tpl-700: #B6390C;
  --tpl-800: #792608;
  --tpl-900: #5B1D06;
  --tpl-925: #3D1304;
  --tpl-950: #1E0A02;
  --tpl-975: #0F0501;
  --tpl-glow: #F0621F;
  --tpl-gold: #FF8A3D;

  /* versões em componentes rgb, para os rgba() da base */
  --tpl-glow-rgb: 240, 98, 31;
  --tpl-core-rgb: 242, 76, 16;
  --tpl-400-rgb: 245, 120, 66;
  --tpl-500-rgb: 226, 74, 14;
  --tpl-200-rgb: 250, 171, 133;
  --tpl-gold-rgb: 255, 138, 61;

  /* ---------- neutros do deck ---------- */
  --tpl-ink: #0B0B0C;
  --tpl-ink-rgb: 11, 11, 12;
  --tpl-ink-2: #121213;
  --tpl-ink-deep: #050506;
  --tpl-surface: #17171A;
  --tpl-surface-2: #1E1E21;
  --tpl-surface-3: #141416;
  --tpl-text: #111113;
  --tpl-text-rgb: 17, 17, 19;
  --tpl-text-2: #5C5A57;
  --tpl-text-3: #8E8B86;
  --tpl-paper: #F5F3F0;
  --tpl-paper-2: #F1EFEC;
  --tpl-paper-3: #F7F5F2;

  /* ==========================================================================
     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: #FAFAFA;
  --gray: #A1A1A6;
  --gray-dark: #6E6E73;

  --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);
}