/* ─────────────────────────────────────────
   base.css — Variáveis, tema e estrutura global
   DevEccom · deveccom.com
───────────────────────────────────────── */

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

/* ── Tokens de design ── */
:root {
  /* Brand */
  --blue:         #2563EB;
  --blue-dark:    #1D4ED8;
  --blue-light:   #EFF6FF;
  --green:        #16A34A;
  --green-light:  #F0FDF4;
  --shopee:       #EE4D2D;
  --shopee-light: #FFF2EF;
  --yellow:       #D97706;
  --yellow-light: #FFFBEB;
  --dark:         #0A0A0A;

  /* Grays */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-400: #94A3B8;
  --gray-600: #475569;
  --gray-800: #1E293B;

  /* Layout */
  --radius:    14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow:    0 2px 16px rgba(0,0,0,0.07);

  /* ── Tema (light default) ── */
  --bg:             #F5F5F5;
  --surface:        #FFFFFF;
  --surface-border: rgba(0,0,0,0.07);
  --text:           #1E293B;
  --text-muted:     #94A3B8;
  --text-secondary: #475569;
  --input-bg:       #FFFFFF;
  --input-border:   #E2E8F0;
  --prefix-bg:      #F1F5F9;
  --range-bg:       #E2E8F0;
  --divider-color:  #F1F5F9;
  --price-gray-bg:  #F1F5F9;
  --price-green-bg: #F0FDF4;
  --arrow-bg:       #EFF6FF;
  --arrow-color:    #2563EB;
  --tag-live-bg:    #F0FDF4;
  --tag-live-color: #16A34A;
  --info-bg:        #F8FAFC;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg:             #0F0F0F;
  --surface:        #1C1C1E;
  --surface-border: rgba(255,255,255,0.08);
  --text:           #F1F5F9;
  --text-muted:     rgba(255,255,255,0.38);
  --text-secondary: rgba(255,255,255,0.60);
  --input-bg:       #2C2C2E;
  --input-border:   rgba(255,255,255,0.10);
  --prefix-bg:      #3A3A3C;
  --range-bg:       #3A3A3C;
  --divider-color:  rgba(255,255,255,0.06);
  --price-gray-bg:  #2C2C2E;
  --price-green-bg: rgba(22,163,74,0.15);
  --arrow-bg:       rgba(37,99,235,0.20);
  --arrow-color:    #93C5FD;
  --tag-live-bg:    rgba(22,163,74,0.15);
  --tag-live-color: #4ADE80;
  --info-bg:        #2C2C2E;
  --shadow:         0 2px 16px rgba(0,0,0,0.30);
}

/* ── Base ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* ── Botão de tema ── */
.theme-btn {
  position: fixed;
  bottom: 24px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  cursor: pointer;
  font-size: 20px;
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,30,30,0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.20);
  transition: transform 0.2s, background 0.3s;
}
[data-theme="light"] .theme-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.10);
}
.theme-btn:hover { transform: scale(1.10); }