/* ===== Theme variables (light/dark) ===== */
:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f3f4f6;
  --text: #111111;
  --muted: rgba(17,17,17,0.75);
  --border: rgba(0,0,0,0.06);
  --shadow: 0 12px 30px rgba(0,0,0,0.08);

  /* Brand */
  --brand-orange: #ff8c1a;
  --brand-black: #000000;
}

/* Dark theme overrides */
:root[data-theme='dark'] {
  --bg: #0b0d10;
  --surface: #11151b;
  --surface-2: #161c24;
  --text: #f2f4f7;
  --muted: rgba(242,244,247,0.75);
  --border: rgba(255,255,255,0.08);
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
}

html, body { background: var(--bg); color: var(--text); }

.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }

.hero { background: linear-gradient(to bottom, var(--bg) 60%, var(--surface)); }

.hero-badges span { background: var(--surface-2); }

.stat-card { background: var(--surface); }

.deal-card { background: var(--bg); box-shadow: 0 0 0 1px var(--border); }
.deal-card:hover { box-shadow: var(--shadow); }

.ticker-wrap { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.site-footer { background: var(--surface); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-2); }

/* Brand button theme: Black + Orange */
.deal-btn,
.load-more-btn {
  background-color: var(--brand-black);
  color: var(--brand-orange);
  border: 2px solid var(--brand-black);
  border-radius: 999px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.deal-btn:hover,
.load-more-btn:hover {
  background-color: transparent;
  color: var(--text);
  border-color: var(--brand-orange);
}

.deal-btn:focus,
.load-more-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 140, 26, 0.25);
}