/*
 * EnviouAí — Tokens de design do painel
 * Importar ANTES de qualquer outro CSS do painel.
 * Uso: <html data-theme="escuro|claro">
 *
 * Compatibilidade retroativa:
 *   --teal     → alias de --accent     (JS antigo usa var(--teal))
 *   --teal-dim → alias de --accent-dim
 */

/* ── Fontes ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

/* ── Tema escuro (padrão) ───────────────────────────────── */
[data-theme="escuro"] {
  --bg:        #0B1018;
  --surface:   #131924;
  --surface2:  #1A2232;
  --border:    #232D40;
  --text:      #EDF0F4;
  --text2:     #8A93A2;
  --text3:     #3D4451;
  --accent:    #34D399;
  --accent-dim:#0D2C1E;
  --accent-fg: #071A12;   /* texto sobre botão accent */
  --red:       #E24B4A;
  --amber:     #F5A623;
  --blue:      #378ADD;
  --font:      'Plus Jakarta Sans', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --radius:    14px;
  /* compat */
  --teal:      #34D399;
  --teal-dim:  #0D2C1E;
}

/* ── Tema claro ─────────────────────────────────────────── */
[data-theme="claro"] {
  --bg:        #F4F6FA;
  --surface:   #FFFFFF;
  --surface2:  #EEF1F6;
  --border:    #D8DFEB;
  --text:      #0E1117;
  --text2:     #4A5568;
  --text3:     #94A3B8;
  --accent:    #059669;
  --accent-dim:#D1FAE5;
  --accent-fg: #FFFFFF;  /* texto sobre botão accent */
  --red:       #DC2626;
  --amber:     #D97706;
  --blue:      #2563EB;
  --font:      'Plus Jakarta Sans', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --radius:    14px;
  /* compat */
  --teal:      #059669;
  --teal-dim:  #D1FAE5;
}

/* ── Ajustes de componentes no tema claro ───────────────── */

/* Botões com bg accent precisam de texto branco no claro */
[data-theme="claro"] .btn-primary,
[data-theme="claro"] .btn-upgrade,
[data-theme="claro"] .btn-copy,
[data-theme="claro"] .btn-conectar-yampi {
  color: var(--accent-fg);
}

/* Badge de plano */
[data-theme="claro"] .badge-free {
  background: var(--surface2);
  color: var(--text3);
  border-color: var(--border);
}
[data-theme="claro"] .badge-pro,
[data-theme="claro"] .badge-starter {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="claro"] .badge-scale {
  background: #EFF6FF;
  color: var(--blue);
  border-color: var(--blue);
}

/* Spinner borda */
[data-theme="claro"] .spinner {
  border-color: var(--border);
  border-top-color: var(--accent);
}

/* Toast */
[data-theme="claro"] .toast {
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}