/**
 * Wave — Variáveis de design (modo claro/escuro)
 * Carregado em dash e play; aplica-se a todo o documento e ao conteúdo injetado (#paginas).
 * Uso: background: var(--wave-bg); color: var(--wave-text); etc.
 *
 * PADRÕES DE MODAL (modals.css + tokens :root):
 *   Padrão global     → header escuro, corpo e footer claros (--wave-modal-*)
 *   .modal.dark        → corpo escuro fixo (opt-in)
 *   .modal.alerta      → marca #002242, fixo
 *   .wave-modal        → alias do padrão (Dash); não escurece o corpo no body.dark
 *
 * Ajuste visual: edite apenas --wave-modal-* em :root abaixo.
 */
:root {
  color-scheme: light dark;

  /* ── Superfícies ─────────────────────────────────────────── */
  --wave-bg: #f5f5f5;
  --wave-bg-card: #ffffff;
  --wave-bg-elevated: #ffffff;

  /* ── Texto ───────────────────────────────────────────────── */
  --wave-text: #212529;
  --wave-text-muted: #6c757d;

  /* ── Bordas ──────────────────────────────────────────────── */
  --wave-border: #dee2e6;

  /* ── Cores semânticas ────────────────────────────────────── */
  --wave-primary: #0d6efd;
  --wave-primary-hover: #0b5ed7;
  --wave-success: #198754;
  --wave-danger: #dc3545;
  --wave-warning: #ffc107;

  /* ── Inputs ──────────────────────────────────────────────── */
  --wave-input-bg: #ffffff;
  --wave-input-border: #ced4da;
  --wave-input-text: #212529;

  /* ── Navbar ──────────────────────────────────────────────── */
  --wave-navbar-bg: #212529;
  --wave-navbar-text: #e9ecef;

  /* ── Camadas (overlay #paginas, modais, backdrop) ───────── */
  --wave-z-pagina-overlay: 1000;
  --wave-z-modal-backdrop: 1040;
  --wave-z-modal: 1055;
  --wave-z-modals-root: 1060;
  --wave-backdrop-bg: rgba(0, 0, 0, 0.5);

  /* ── Modal — padrão global (:root) ─────────────────────────
   * Header escuro, corpo e footer claros. Não altere no body.dark.
   * Opt-in escuro: class="dark" no .modal
   * ───────────────────────────────────────────────────────── */
  --wave-modal-shell-bg: #1c1c1c;
  --wave-modal-header-bg: #1c1c1c;
  --wave-modal-header-text: #f0f0f0;
  --wave-modal-header-muted: rgba(240, 240, 240, 0.7);
  --wave-modal-body-bg: #ffffff;
  --wave-modal-body-text: #212529;
  --wave-modal-footer-bg: #ffffff;
  --wave-modal-footer-text: #212529;
  --wave-modal-border: #dee2e6;
  --wave-modal-muted-text: #6c757d;
  --wave-modal-input-bg: #ffffff;
  --wave-modal-input-text: #212529;
  --wave-modal-input-border: #ced4da;
  --wave-modal-input-focus-border: #86b7fe;
  --wave-modal-input-focus-shadow: rgba(13, 110, 253, 0.25);

  /* Aliases legados (apontam para o padrão :root) */
  --wave-modal-default-bg: var(--wave-modal-body-bg);
  --wave-modal-default-header-bg: var(--wave-modal-header-bg);
  --wave-modal-default-text: var(--wave-modal-body-text);
  --wave-modal-default-border: var(--wave-modal-border);
  --wave-modal-default-footer-bg: var(--wave-modal-footer-bg);
  --wave-modal-bg: var(--wave-modal-body-bg);
  --wave-modal-text: var(--wave-modal-body-text);
  --wave-modal-dark-header-bg: var(--wave-modal-header-bg);
  --wave-modal-dark-text: var(--wave-modal-header-text);
  --wave-modal-dark-bg: #1c1c1c;
  --wave-modal-dark-footer-bg: #1c1c1c;
  --wave-modal-dark-border: #333333;

  /* ── Modal alerta (marca — fixo em ambos os temas) ───────── */
  --wave-alerta-bg: #002242;
  --wave-alerta-text: #ffffff;
  --wave-alerta-btn-bg: #ffffff;
  --wave-alerta-btn-text: #002242;
  --wave-alerta-erro-bg: #9a0000;
  --wave-alerta-erro-btn-text: #9a0000;

  /* ── Botões de modal ─────────────────────────────────────── */
  --wave-btn-modal-bg: #002242;
  --wave-btn-modal-border: #002242;
  --wave-btn-modal-text: #ffffff;
  --wave-btn-modal-light-bg: #f8f9fa;
  --wave-btn-modal-light-border: #dee2e6;
  --wave-btn-modal-light-text: #212529;

  /* ── Lista de agendamentos (agendar-lista-modal) ─────────── */
  --wave-agendar-tab-bg: #f0f0f0;
  --wave-agendar-tab-text: #1a1a1a;
  --wave-agendar-tab-border: #dee2e6;
  --wave-agendar-card-bg: #f2f2f2;
  --wave-agendar-card-text: #1a1a1a;
  --wave-agendar-card-border: #dddddd;
  --wave-agendar-card-desc: #555555;
  --wave-agendar-dia-ativo-bg: #ffffff;
  --wave-agendar-dia-ativo-text: #1a1a1a;
  --wave-agendar-dia-ativo-border: #333333;
  --wave-agendar-periodo-text: #1a1a1a;

  /* ── Pastas (Play — sidebar tiers em radio_pastas_musicas) ───────────────
   * Efeitos: hover, aba ativa (ícone+título dourado), botão +, lista PASTA ativa.
   * Tom base: amarelo/dourado (#FFCC00); editar só aqui. RGB do accent: 255, 204, 0.
   *
   * Caixa amarela (fundo+borda) no tier ativo — OPCIONAL: adicione classe .box ao <ul>
   *   class="... sidebar-pastas-tier-nav box ..."
   * Sem .box: tier ativo só com texto/ícone dourados; botão + inalterado. */
  --wave-pastas-accent: #ffcc00;
  --wave-pastas-accent-rgb: 255, 204, 0;
  --wave-pastas-tier-link-text: #ffffff;
  --wave-pastas-tier-sub-text: #ffffff;
  --wave-pastas-tier-sub-font-size: 0.8rem;
  --wave-pastas-tier-icon-color: #ffffff;
  --wave-pastas-tier-icon-font-size: 1.65rem;
  --wave-pastas-tier-active-icon-color: var(--wave-pastas-accent);
  --wave-pastas-tier-active-title-text: var(--wave-pastas-accent);
  --wave-pastas-tier-active-sub-text: rgba(255, 204, 0, 0.92);
  --wave-pastas-tier-hover-bg: rgba(255, 255, 255, 0.06);
  --wave-pastas-tier-hover-border: rgba(255, 255, 255, 0.08);
  --wave-pastas-tier-active-bg: rgba(255, 204, 0, 0.12);
  --wave-pastas-tier-active-border: rgba(255, 204, 0, 0.4);
  --wave-pastas-plus-btn-text: var(--wave-pastas-accent);
  --wave-pastas-plus-btn-border: rgba(255, 204, 0, 0.5);
  --wave-pastas-plus-btn-bg: rgba(40, 40, 40, 0.95);
  --wave-pastas-plus-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --wave-pastas-plus-btn-margin-right: 1.1rem;
  --wave-pastas-plus-btn-hover-text: #fff8cc;
  --wave-pastas-plus-btn-hover-border: var(--wave-pastas-accent);
  --wave-pastas-plus-btn-hover-bg: rgba(255, 204, 0, 0.28);
  --wave-pastas-sidebar-item-ativa-bg: rgba(255, 204, 0, 0.2);
  --wave-pastas-sidebar-item-ativa-text: var(--wave-pastas-accent);
  --wave-pastas-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
  --wave-pastas-sidebar-item-ativa-hover-bg: rgba(255, 204, 0, 0.32);

  /* ── Track list — listagem de faixas (play, modais Deezer, pastas) ────────
   * Superfície: --wave-track-list-light-* (modal claro) ou --dark-* (play).
   * Ativo/selecionado: tom amarelado/dourado (--wave-track-list-accent-*).
   * Componente: .modal-musicas-preview + --light | --dark */
  --wave-track-list-accent: #e8a337;
  --wave-track-list-accent-rgb: 232, 163, 55;
  --wave-track-list-accent-hover: #efae42;
  --wave-track-list-accent-emphasis: #b87e1f;
  --wave-track-list-accent-soft: #f2c56a;
  --wave-track-list-accent-lighter: #f5d07e;
  --wave-track-list-accent-on-dark: #f2c56a;
  --wave-track-list-light-text: #212529;
  --wave-track-list-light-text-muted: rgba(33, 37, 41, 0.55);
  --wave-track-list-light-row-bg: #f4f6f8;
  --wave-track-list-light-row-hover: rgba(var(--wave-track-list-accent-rgb), 0.12);
  --wave-track-list-light-row-selected: rgba(var(--wave-track-list-accent-rgb), 0.22);
  --wave-track-list-light-row-border: rgba(var(--wave-track-list-accent-rgb), 0.35);
  --wave-track-list-light-time-border: rgba(0, 0, 0, 0.12);
  --wave-track-list-light-icon: rgba(33, 37, 41, 0.62);
  --wave-track-list-dark-text: rgba(255, 255, 255, 0.92);
  --wave-track-list-dark-text-muted: rgba(255, 255, 255, 0.5);
  --wave-track-list-dark-row-bg: rgba(255, 255, 255, 0.06);
  --wave-track-list-dark-row-hover: rgba(255, 255, 255, 0.1);
  --wave-track-list-dark-row-selected: rgba(var(--wave-track-list-accent-rgb), 0.24);
  --wave-track-list-dark-row-border: rgba(var(--wave-track-list-accent-rgb), 0.42);
  --wave-track-list-dark-time-border: rgba(255, 255, 255, 0.18);
  --wave-track-list-dark-icon: rgba(255, 255, 255, 0.55);
}

/* ── Tema escuro: body.dark ou [data-theme="dark"] ───────────────────────── */
[data-theme="dark"],
body.dark {
  /* Superfícies */
  --wave-bg: #1a1a1a;
  --wave-bg-card: #212529;
  --wave-bg-elevated: #2d3238;

  /* Texto */
  --wave-text: #e9ecef;
  --wave-text-muted: #adb5bd;

  /* Bordas */
  --wave-border: #495057;

  /* Cores semânticas */
  --wave-primary: #6ea8fe;
  --wave-primary-hover: #5b9aed;
  --wave-success: #75b798;
  --wave-danger: #f1aeb5;
  --wave-warning: #ffda6a;

  /* Inputs */
  --wave-input-bg: #212529;
  --wave-input-border: #495057;
  --wave-input-text: #e9ecef;

  /* Navbar */
  --wave-navbar-bg: #212529;
  --wave-navbar-text: #e9ecef;

  /* Modais: corpo/footer permanecem claros — tokens em :root (--wave-modal-body-*) */

  /* Botões de modal — versão escura */
  --wave-btn-modal-light-bg: #2d3238;
  --wave-btn-modal-light-border: #495057;
  --wave-btn-modal-light-text: #e9ecef;

  /* Lista de agendamentos — versão escura */
  --wave-agendar-tab-bg: #2d3238;
  --wave-agendar-tab-text: #e9ecef;
  --wave-agendar-tab-border: #495057;
  --wave-agendar-card-bg: #2a2a2a;
  --wave-agendar-card-text: #e9ecef;
  --wave-agendar-card-border: #444444;
  --wave-agendar-card-desc: #adb5bd;
  --wave-agendar-dia-ativo-bg: #3a3a3a;
  --wave-agendar-dia-ativo-text: #e9ecef;
  --wave-agendar-dia-ativo-border: #888888;
  --wave-agendar-periodo-text: #e9ecef;

  /* Pastas (play escuro): mesmo tom dourado; ajuste aqui se precisar */
  --wave-pastas-accent: #ffcc00;
  --wave-pastas-accent-rgb: 255, 204, 0;
  --wave-pastas-tier-link-text: #ffffff;
  --wave-pastas-tier-sub-text: #ffffff;
  --wave-pastas-tier-icon-color: #ffffff;
  --wave-pastas-tier-active-icon-color: var(--wave-pastas-accent);
  --wave-pastas-tier-active-title-text: var(--wave-pastas-accent);
  --wave-pastas-tier-active-sub-text: rgba(255, 204, 0, 0.92);
  --wave-pastas-tier-hover-bg: rgba(255, 255, 255, 0.06);
  --wave-pastas-tier-hover-border: rgba(255, 255, 255, 0.08);
  --wave-pastas-tier-active-bg: rgba(255, 204, 0, 0.12);
  --wave-pastas-tier-active-border: rgba(255, 204, 0, 0.4);
  --wave-pastas-plus-btn-text: var(--wave-pastas-accent);
  --wave-pastas-plus-btn-border: rgba(255, 204, 0, 0.5);
  --wave-pastas-plus-btn-bg: rgba(40, 40, 40, 0.95);
  --wave-pastas-plus-btn-hover-border: var(--wave-pastas-accent);
  --wave-pastas-plus-btn-hover-bg: rgba(255, 204, 0, 0.28);
  --wave-pastas-plus-btn-hover-text: #fff8cc;
  --wave-pastas-sidebar-item-ativa-bg: rgba(255, 204, 0, 0.2);
  --wave-pastas-sidebar-item-ativa-text: var(--wave-pastas-accent);
  --wave-pastas-sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
  --wave-pastas-sidebar-item-ativa-hover-bg: rgba(255, 204, 0, 0.32);
}

/* ── Página light forçada dentro de body dark (ex: subpáginas do play) ───── */
.pagina.light {
  --wave-bg: #f5f5f5;
  --wave-bg-card: #ffffff;
  --wave-text: #212529;
  --wave-text-muted: #6c757d;
  --wave-border: #dee2e6;
  --wave-input-bg: #ffffff;
  --wave-input-text: #212529;
  --wave-btn-modal-light-bg: #f8f9fa;
  --wave-btn-modal-light-border: #dee2e6;
  --wave-btn-modal-light-text: #212529;
  --wave-agendar-tab-bg: #f0f0f0;
  --wave-agendar-tab-text: #1a1a1a;
  --wave-agendar-tab-border: #dee2e6;
  --wave-agendar-card-bg: #f2f2f2;
  --wave-agendar-card-text: #1a1a1a;
  --wave-agendar-card-border: #dddddd;
  --wave-agendar-card-desc: #555555;
  --wave-agendar-dia-ativo-bg: #ffffff;
  --wave-agendar-dia-ativo-text: #1a1a1a;
  --wave-agendar-dia-ativo-border: #333333;
  --wave-agendar-periodo-text: #1a1a1a;
}