/* ═══════════════════════════════════════════════
   FLOW ALÁFIA — theme.css
   Tema escuro (padrão) e tema claro
   ═══════════════════════════════════════════════ */

/* ── TEMA ESCURO (padrão) ─────────────────────── */
:root,
html[data-theme="dark"] {
  --gold:  #c9a84c;
  --gold2: #e0bc5e;
  --gold-dim: #c9a84c1a;
  --gold-brd: #c9a84c33;

  --bg:  #0a0a0a;
  --bg2: #111111;
  --bg3: #161616;
  --bg4: #1e1e1e;
  --bg5: #242424;

  --brd:  #1e1e1e;
  --brd2: #2a2a2a;

  --txt:  #e0e0e0;
  --txt2: #888888;
  --txt3: #555555;
  --txt4: #333333;

  --danger:      #e07060;
  --danger-dim:  #c9443322;
  --danger-brd:  #c9443333;
  --success:     #4caf82;
  --success-dim: #4caf8222;
  --success-brd: #4caf8233;
  --info:        #6aabf7;
  --purple:      #a78bfa;
  --cyan:        #22d3ee;

  --shadow: 0 4px 24px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);

  --logo-filter: drop-shadow(0 0 18px rgba(201,168,76,.25));
  --r: #e07060;
  --g: #4caf82;
  --b: #6aabf7;
  --p: #a78bfa;
  --c: #22d3ee;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg5: #242424;
}

/* ── TEMA CLARO ───────────────────────────────── */
html[data-theme="light"] {
  --gold:  #a07828;
  --gold2: #c09040;
  --gold-dim: #a0782812;
  --gold-brd: #a0782828;

  --bg:  #f5f3ef;
  --bg2: #ffffff;
  --bg3: #faf8f5;
  --bg4: #f0ede8;
  --bg5: #e8e4de;

  --brd:  #e0dbd4;
  --brd2: #d0cbc4;

  --txt:  #1a1410;
  --txt2: #5a4e44;
  --txt3: #8a7e74;
  --txt4: #b0a89e;

  --danger:      #c0392b;
  --danger-dim:  #c0392b14;
  --danger-brd:  #c0392b28;
  --success:     #27ae60;
  --success-dim: #27ae6014;
  --success-brd: #27ae6028;
  --info:        #2980b9;
  --purple:      #8e44ad;
  --cyan:        #16a085;

  --shadow: 0 4px 24px rgba(0,0,0,.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);

  --logo-filter: drop-shadow(0 0 8px rgba(160,120,40,.2));
  --r: #c0392b;
  --g: #27ae60;
  --b: #2980b9;
  --p: #8e44ad;
  --c: #16a085;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg5: #e8e4de;
}

/* ── Botão de alternar tema ───────────────────── */
#btn-theme {
  background: var(--bg4);
  border: 1px solid var(--brd2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .75rem;
  color: var(--txt2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
  white-space: nowrap;
  font-family: inherit;
}
#btn-theme:hover {
  border-color: var(--gold-brd);
  color: var(--gold);
}
#btn-theme .theme-icon { font-size: .9rem; }
#btn-theme .theme-label { font-size: .7rem; font-weight: 600; }

/* ── Transição suave entre temas ──────────────── */
*, *::before, *::after {
  transition: background-color .2s ease, color .15s ease, border-color .15s ease !important;
}
/* Exceto animações que não devem ter transition */
.cal-dia, .cal-dot, .badge, svg, img, input, select, textarea {
  transition: none !important;
}