/* ================================
   SISTEMA DE TEMAS - CORES FRIAS
   5 Temas Predefinidos
   ================================ */
   
   /* TEMA PADRÃO: PRETO */

:root[data-theme="preto-padrao"],
:root:not([data-theme]) {
  --bg: #0f0d0b;
  --surface: #1a1714;
  --surface2: #242018;
  --border: #2e2820;
  --accent: #e8a020;
  --accent2: #c0392b;
  --text: #f0ece4;
  --muted: #8a8070;
  --card-bg: #1e1b16;
  --success: #00d9a3;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* Garantir que aplicam em tudo */
body[data-theme="preto-padrao"] {
  background: #0a0a0a;
  color: #ffffff;
}

body[data-theme="preto-padrao"] .card,
body[data-theme="preto-padrao"] .container {
  background: #151515;
  color: #ffffff;
}

/* TEMA 1: AZUL FRESCO  */
:root[data-theme="azul-fresco"],
:root:not([data-theme]) {
  --bg: #0a1628;
  --surface: #0f1f3a;
  --surface2: #142d52;
  --border: #1e3a5f;
  --accent: #00d4ff;
  --accent2: #0099cc;
  --text: #e0f2ff;
  --muted: #6b8caf;
  --card-bg: #112a45;
  --success: #00d4a2;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* TEMA 2: VERDE MENTA */
:root[data-theme="verde-menta"] {
  --bg: #0d1f1a;
  --surface: #112d27;
  --surface2: #173d35;
  --border: #1f4f45;
  --accent: #00d9a3;
  --accent2: #00a876;
  --text: #d4f1e8;
  --muted: #6b8f83;
  --card-bg: #14352d;
  --success: #00d9a3;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* TEMA 3: ROXO FROST - CUSTOMIZADO */
:root[data-theme="roxo-frost"] {
  --bg: #2d0a4d;           /* Roxo escuro de fundo */
  --surface: #3d1a5d;      /* Roxo um pouco claro */
  --surface2: #4d2a6d;     /* Roxo mais claro ainda */
  --border: #5d3a7d;       /* Roxo borda */
  --accent: #00d4ff;       /* Azul claro (destaque) */
  --accent2: #00b8dd;      /* Azul claro mais escuro */
  --text: #ffffff;         /* Branco (texto) */
  --muted: #a080b0;        /* Roxo meio */
  --card-bg: #351555;      /* Roxo card (produtos) AZUL CLARO */
  --success: #00d9a3;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* TEMA 4: AZUL PROFUNDO */
:root[data-theme="azul-profundo"] {
  --bg: #0a1220;
  --surface: #0f192e;
  --surface2: #162845;
  --border: #1f3a5a;
  --accent: #1e90ff;
  --accent2: #0066cc;
  --text: #d9e8ff;
  --muted: #6b7f9f;
  --card-bg: #122240;
  --success: #00d9a3;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* TEMA 5: CIANO GLACIAL */
:root[data-theme="ciano-glacial"] {
  --bg: #081920;
  --surface: #0d2635;
  --surface2: #123d52;
  --border: #1a5a78;
  --accent: #00e5ff;
  --accent2: #00a6cc;
  --text: #d1f0ff;
  --muted: #6b8fa3;
  --card-bg: #0f3a52;
  --success: #00d9a3;
  --warning: #ffa500;
  --error: #ff6b6b;
}

/* ================================
   ESTILOS COMUNS (Aplicam em todos os temas)
   ================================ */

:root {
  --radius: 14px;
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Header */
.header {
  background: rgba(var(--bg), 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.card:hover {
  background: var(--surface2);
  border-color: var(--accent);
}

/* Buttons */
.btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--accent), 0.3);
}

/* Toast */
.toast {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  color: var(--text);
}

/* Success */
.success {
  color: var(--success);
}

/* Error */
.error {
  color: var(--error);
}