/* ===== CSS Variables (all components reference these) ===== */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a25;
  --bg-card: #16161e;
  --border: #2a2a35;
  --text-primary: #e8e8ed;
  --text-secondary: #9a9ab0;
  --text-muted: #6b6b80;
  --accent: #6366f9;
  --accent-gradient: linear-gradient(135deg, #6366f9, #00d4ff);
  --shadow-accent: 0 8px 32px rgba(99, 102, 241, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
}

/* ===== Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
input, textarea { font-family: inherit; font-size: 1rem; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 0.75rem; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a45; }

/* ===== Utility ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Product Card Hover ===== */
.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-accent); }

/* ===== Mobile Nav ===== */
@media (max-width: 768px) {
  .mobile-nav { display: flex !important; }
  .mobile-toggle { display: block !important; }
  .desktop-nav { display: none !important; }
}
@media (min-width: 769px) {
  .desktop-nav { display: flex !important; }
  .mobile-nav { display: none !important; }
  .mobile-toggle { display: none !important; }
}