/* ================================================================
   UzShop – Premium Design System Tokens (theme.css)
   Google Fonts: Inter | Bootstrap 5 override
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Root Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand Gradient – Purple → Blue */
  --primary:        #7C3AED;
  --primary-dark:   #5B21B6;
  --primary-light:  #A78BFA;
  --secondary:      #0EA5E9;
  --accent:         #F59E0B;
  --success:        #10B981;
  --danger:         #EF4444;
  --warning:        #F59E0B;
  --info:           #06B6D4;

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #7C3AED 0%, #0EA5E9 100%);
  --grad-warm:      linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --grad-cool:      linear-gradient(135deg, #0EA5E9 0%, #10B981 100%);
  --grad-dark:      linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  --grad-card:      linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));

  /* Backgrounds */
  --bg:             #F8F7FF;
  --bg-card:        #FFFFFF;
  --bg-glass:       rgba(255, 255, 255, 0.75);
  --bg-muted:       #F1F0F8;
  --bg-overlay:     rgba(30, 27, 75, 0.5);

  /* Text */
  --text-primary:   #1E1B4B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;

  /* Borders */
  --border:         rgba(124, 58, 237, 0.12);
  --border-light:   rgba(0, 0, 0, 0.06);

  /* Shadows */
  --shadow-xs:      0 1px 3px rgba(124, 58, 237, 0.08);
  --shadow-sm:      0 4px 12px rgba(124, 58, 237, 0.10);
  --shadow-md:      0 8px 24px rgba(124, 58, 237, 0.15);
  --shadow-lg:      0 16px 40px rgba(124, 58, 237, 0.18);
  --shadow-xl:      0 24px 60px rgba(124, 58, 237, 0.22);

  /* Radius */
  --radius-sm:      8px;
  --radius:         14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  /* Spacing scale */
  --space-xs:       0.25rem;
  --space-sm:       0.5rem;
  --space-md:       1rem;
  --space-lg:       1.5rem;
  --space-xl:       2rem;
  --space-2xl:      3rem;

  /* Typography */
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;

  /* Transitions */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:     all 0.25s var(--ease);
  --transition-fast:all 0.15s var(--ease);
  --transition-slow:all 0.4s var(--ease);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1050;
  --z-toast:    1080;
  --z-overlay:  1040;
}

/* ── Dark Mode Tokens ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0F0E1A;
  --bg-card:      #1A1827;
  --bg-glass:     rgba(26, 24, 39, 0.85);
  --bg-muted:     #221F33;
  --text-primary:   #F0EEFF;
  --text-secondary: #A09BBD;
  --text-muted:     #6B6880;
  --border:         rgba(167, 139, 250, 0.15);
  --border-light:   rgba(255, 255, 255, 0.06);
  --shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.5);
  --bg-overlay:     rgba(0, 0, 0, 0.7);
}

/* ── Bootstrap Override Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* Override Bootstrap primary color */
.btn-primary {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  opacity: 0.92 !important;
}
.btn-primary:active { transform: translateY(0) !important; }

.btn-outline-primary {
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  background: transparent !important;
  transition: var(--transition) !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Cards */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  overflow: hidden;
}

/* Badge color overrides */
.badge.bg-primary { background: var(--grad-primary) !important; }
.badge.bg-success { background: var(--success) !important; }
.badge.bg-warning { background: var(--warning) !important; color: #1E1B4B !important; }
.badge.bg-danger  { background: var(--danger) !important; }
.badge.bg-info    { background: var(--info) !important; }

/* Form controls */
.form-control, .form-select {
  background: var(--bg-muted) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  transition: var(--transition) !important;
  padding: 0.65rem 1rem !important;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
  border-color: var(--primary) !important;
  background: var(--bg-card) !important;
}

/* Modal */
.modal-content {
  border-radius: var(--radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
  background: var(--bg-card) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-light) !important;
  padding: 1.5rem !important;
}
.modal-footer {
  border-top: 1px solid var(--border-light) !important;
  padding: 1.25rem 1.5rem !important;
}

/* Links */
a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--primary-dark); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-muted); }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Utility Classes */
.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-gradient-primary { background: var(--grad-primary) !important; }
.bg-gradient-warm    { background: var(--grad-warm) !important; }
.bg-gradient-cool    { background: var(--grad-cool) !important; }
.shadow-soft  { box-shadow: var(--shadow-md) !important; }
.shadow-brand { box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-2xl  { border-radius: var(--radius-full) !important; }
.glass {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border) !important;
}
.animate-fade-in { animation: fadeIn 0.4s var(--ease) both; }
.animate-slide-up { animation: slideUp 0.4s var(--ease) both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
}
@keyframes bounce-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}