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

:root {
  --cta: #F97316;
  --cta-hover: #EA580C;
  --bg: #F8FAFC;
  --surface: #fff;
  --surface-glass: rgba(255, 255, 255, 0.75);
  --text: #334155;
  --text-heading: #1E293B;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --success: #16A34A;
  --warning: #D97706;
  --error: #DC2626;
  --info: #0284C7;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  --font: 'Plus Jakarta Sans', sans-serif;
  --admin-sidebar: #1E293B;
}

[data-theme="dark"] {
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-glass: rgba(30, 41, 59, 0.75);
  --text: #CBD5E1;
  --text-heading: #F1F5F9;
  --text-muted: #94A3B8;
  --border: #334155;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Ensure CTA buttons are ALWAYS visible regardless of theme */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-cta {
  background: var(--cta, #F97316);
  color: #fff;
}

[data-theme="dark"] .btn-outline {
  border-color: var(--cta);
  color: var(--cta);
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--cta);
  color: #fff;
}

[data-theme="dark"] .btn-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .input-field {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .input-field::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .google-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .otp-input {
  background: var(--surface);
  color: var(--text-heading);
  border-color: var(--border);
}

[data-theme="dark"] .turnstile-box {
  background: var(--bg);
  border-color: var(--border);
}

[data-theme="dark"] .upload-zone {
  border-color: var(--border);
}

/* Dark mode: cards need visible borders */
[data-theme="dark"] .product-card,
[data-theme="dark"] .category-card,
[data-theme="dark"] .stat-card {
  background: var(--surface);
  border-color: var(--border);
}

/* Dark mode: footer stays dark (already dark) */
[data-theme="dark"] .footer {
  background: #0F172A;
  border-top: 1px solid var(--border);
}

/* Dark mode: cookie banner */
[data-theme="dark"] .cookie-banner {
  background: var(--surface);
  border-color: var(--border);
}

/* Dark mode: tab buttons */
[data-theme="dark"] .tab-btn {
  color: var(--text-muted);
}

[data-theme="dark"] .tab-btn.active {
  color: var(--cta);
  border-bottom-color: var(--cta);
}

/* Dark mode: auth card */
[data-theme="dark"] .auth-card > div:first-child {
  background: var(--surface);
  border-color: var(--border);
}

/* Dark mode: badges */
[data-theme="dark"] .badge--success { background: rgba(22,163,74,0.2); }
[data-theme="dark"] .badge--warning { background: rgba(217,119,6,0.2); }
[data-theme="dark"] .badge--info { background: rgba(2,132,199,0.2); }
[data-theme="dark"] .badge--muted { background: rgba(148,163,184,0.15); }

/* Dark mode: search dropdown */
[data-theme="dark"] .search-dropdown {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .search-item:hover {
  background: rgba(249,115,22,0.08);
}

/* Dark mode: stats bar */
[data-theme="dark"] .stats-bar {
  background: var(--surface);
  border-color: var(--border);
}

/* Dark mode: sections */
[data-theme="dark"] .section--surface {
  background: var(--surface);
}

[data-theme="dark"] .section--bordered {
  border-color: var(--border);
}