/* Temas centralizados: variáveis visuais fora dos componentes para facilitar repaginação. */

body[data-theme="fight-red"] {
  --bg:#050000; --bg-soft:#120506; --panel:#121214; --panel-soft:#1b1113; --text:#fff7f7; --muted:#c8adb1; --line:rgba(255,45,36,.22); --primary:#ff1d14; --primary-soft:#970b08; --accent:#ffffff; --arena-glow:rgba(255,29,20,.36); --premium-line:rgba(255,29,20,.45);
}
body[data-theme="elite-dark"] {
  --bg:#05070a; --bg-soft:#111722; --panel:#151a22; --panel-soft:#202734; --text:#f6f8fb; --muted:#aeb8c8; --line:rgba(186,198,216,.20); --primary:#d6dde9; --primary-soft:#68778b; --accent:#78a6ff; --arena-glow:rgba(120,166,255,.16); --premium-line:rgba(214,221,233,.32);
}
body[data-theme="tatame-gold"] {
  --bg:#080602; --bg-soft:#171105; --panel:#17130a; --panel-soft:#241b0a; --text:#fff9e6; --muted:#cbbd96; --line:rgba(235,181,67,.24); --primary:#e7b443; --primary-soft:#8b6421; --accent:#fff2c0; --arena-glow:rgba(231,180,67,.28); --premium-line:rgba(231,180,67,.42);
}
body[data-theme] .main-content { background: radial-gradient(circle at 76% 9%, var(--arena-glow), transparent 28%), linear-gradient(140deg, var(--bg), var(--bg-soft) 72%, #050505) !important; }
body[data-theme] .card, body[data-theme] .page-hero, body[data-theme] .fight-panel, body[data-theme] .list-card { background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, #000), color-mix(in srgb, var(--panel-soft) 88%, #000)) !important; border-color: var(--line) !important; color: var(--text); }
body[data-theme] .primary-button { background: linear-gradient(135deg, var(--primary), var(--primary-soft)) !important; color: #fff; }
body[data-theme="elite-dark"] .primary-button { color:#06080d; }
body[data-theme="tatame-gold"] .primary-button { color:#120c02; }
body[data-theme] .secondary-button { background: color-mix(in srgb, var(--panel-soft) 82%, #fff 6%) !important; color: var(--text) !important; border-color: var(--line) !important; }
body[data-theme] .topbar, body[data-theme] .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #000), color-mix(in srgb, var(--bg-soft) 86%, #000)) !important; border-color: var(--line) !important; }
body[data-theme] input, body[data-theme] select, body[data-theme] textarea, body[data-theme] .input-dark { background: color-mix(in srgb, var(--bg) 76%, #fff 3%) !important; color: var(--text) !important; border-color: var(--line) !important; }
body[data-theme] .theme-dock { border-color: var(--line); background: color-mix(in srgb, var(--panel) 88%, #000); }
body[data-theme] .theme-dock button.active { background: var(--primary); color: #050505; }

/* Acentos de módulo na camada de temas: cores de destaque apenas no card topo/hero da área. */
body[data-theme][data-route="mensalidades"] .finance-hero,
body[data-theme][data-route="mensalidades"] .page-hero:first-of-type {
  background:
    radial-gradient(circle at 92% 10%, rgba(53,180,125,.28), transparent 30%),
    linear-gradient(135deg, rgba(16,49,34,.96), rgba(19,27,34,.96)) !important;
  border-left: 4px solid var(--finance) !important;
  box-shadow: 0 22px 60px rgba(53,180,125,.10), var(--shadow) !important;
}

body[data-theme][data-route="graduacoes"] .graduation-hero {
  background:
    radial-gradient(circle at 92% 10%, rgba(139,92,246,.30), transparent 30%),
    linear-gradient(135deg, rgba(38,26,64,.96), rgba(19,27,34,.96)) !important;
  border-left: 4px solid var(--graduation) !important;
  box-shadow: 0 22px 60px rgba(139,92,246,.12), var(--shadow) !important;
}

body[data-theme][data-route="presencas"] .chamada-hero,
body[data-theme][data-route="presencas"] .fight-hero,
body[data-theme][data-route="presencas"] .page-hero:first-of-type {
  background:
    radial-gradient(circle at 92% 10%, rgba(56,189,248,.30), transparent 30%),
    linear-gradient(135deg, rgba(14,44,62,.96), rgba(19,27,34,.96)) !important;
  border-left: 4px solid var(--presence) !important;
  box-shadow: 0 22px 60px rgba(56,189,248,.11), var(--shadow) !important;
}

body[data-theme][data-route="mural"] .mural-hero,
body[data-theme][data-route="mural"] .page-hero:first-of-type {
  background:
    radial-gradient(circle at 92% 10%, rgba(242,184,75,.30), transparent 30%),
    linear-gradient(135deg, rgba(54,39,16,.96), rgba(19,27,34,.96)) !important;
  border-left: 4px solid var(--mural) !important;
  box-shadow: 0 22px 60px rgba(242,184,75,.10), var(--shadow) !important;
}