/* ==========================================================================
   Quantum Design System
   Shared tokens + component classes for the storefront.
   Apple-style restraint, Amazon-style density where it matters.
   ========================================================================== */

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

:root {
  /* Brand */
  --q-primary: #31b1d8;
  --q-primary-hover: #2697ba;
  --q-primary-pressed: #1d7895;
  --q-primary-tint: #e8f8fc;
  --q-primary-dark: #7fd6f0;

  /* Surfaces (light) */
  --q-bg: #ffffff;
  --q-bg-secondary: #f5f5f7;
  --q-surface: #ffffff;
  --q-surface-raised: #ffffff;
  --q-border: #e3e5e8;
  --q-border-strong: #d1d5db;

  /* Text (light) */
  --q-text: #1d1d1f;
  --q-text-muted: #6e6e73;
  --q-text-faint: #a1a1a6;
  --q-text-on-primary: #ffffff;

  /* Semantic */
  --q-success: #1f9d55;
  --q-warning: #b7791f;
  --q-danger: #e0392b;
  --q-danger-tint: #fdecea;

  /* Elevation */
  --q-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --q-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --q-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* Shape */
  --q-radius-sm: 8px;
  --q-radius-md: 14px;
  --q-radius-lg: 20px;
  --q-radius-pill: 999px;

  /* Spacing (4px base) */
  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 20px;
  --q-space-6: 24px;
  --q-space-8: 32px;
  --q-space-10: 40px;
  --q-space-12: 48px;
  --q-space-14: 56px;
  --q-space-16: 64px;

  /* Type */
  --q-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Motion */
  --q-transition: 180ms cubic-bezier(.4,0,.2,1);

  /* Layout */
  --q-container: 1280px;
  --q-container-wide: 1440px;

  /* Header height (kept in sync with header component) */
  --q-header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

/* Scoped to the theme so legacy pages (bootstrap/main.css) keep their own box model */
body.q-theme, body.q-theme *, body.q-theme *::before, body.q-theme *::after {
  box-sizing: border-box;
}

body.q-theme {
  font-family: var(--q-font);
  background: var(--q-bg);
  color: var(--q-text);
  -webkit-font-smoothing: antialiased;
}

body.q-theme a { transition: color var(--q-transition); }

/* ---- Layout helpers ---- */
.q-container {
  max-width: var(--q-container);
  margin: 0 auto;
  padding: 0 var(--q-space-4);
}
.q-container-wide {
  max-width: var(--q-container-wide);
  margin: 0 auto;
  padding: 0 var(--q-space-4);
}

/* ---- Buttons ---- */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-space-2);
  font-family: var(--q-font);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--q-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--q-transition), border-color var(--q-transition), color var(--q-transition), transform var(--q-transition);
  white-space: nowrap;
}
.q-btn:active { transform: scale(0.97); }
.q-btn-primary {
  background: var(--q-primary);
  color: var(--q-text-on-primary);
}
.q-btn-primary:hover { background: var(--q-primary-hover); color: var(--q-text-on-primary); }
.q-btn-primary:active { background: var(--q-primary-pressed); }

.q-btn-secondary {
  background: transparent;
  border-color: var(--q-border-strong);
  color: var(--q-text);
}
.q-btn-secondary:hover { border-color: var(--q-primary); color: var(--q-primary); }

.q-btn-ghost {
  background: transparent;
  color: var(--q-text);
}
.q-btn-ghost:hover { background: var(--q-bg-secondary); color: var(--q-text); }

.q-btn:disabled, .q-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.q-btn-sm { padding: 7px 14px; font-size: 13px; }
.q-btn-block { width: 100%; }

/* ---- Cards ---- */
.q-card {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-md);
  box-shadow: var(--q-shadow-sm);
  transition: box-shadow var(--q-transition), transform var(--q-transition), border-color var(--q-transition);
}
.q-card-hover:hover {
  box-shadow: var(--q-shadow-md);
  transform: translateY(-3px);
  border-color: var(--q-border-strong);
}

/* ---- Badges ---- */
.q-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--q-radius-pill);
}
.q-badge-new { background: var(--q-primary-tint); color: var(--q-primary-pressed); }
.q-badge-sale { background: var(--q-danger-tint); color: var(--q-danger); }
.q-badge-stock-low { background: #fff4e0; color: var(--q-warning); }
.q-badge-stock-out { background: var(--q-bg-secondary); color: var(--q-text-muted); }

/* ---- Inputs ---- */
.q-input {
  font-family: var(--q-font);
  font-size: 15px;
  padding: 11px 16px;
  border-radius: var(--q-radius-sm);
  border: 1px solid var(--q-border-strong);
  background: var(--q-surface);
  color: var(--q-text);
  transition: border-color var(--q-transition), box-shadow var(--q-transition);
  width: 100%;
}
.q-input:focus {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 3px var(--q-primary-tint);
}

/* ---- Section headings ---- */
.q-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--q-primary);
}
.q-section-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--q-text);
  margin: 0;
}
.q-section-sub {
  color: var(--q-text-muted);
  font-size: 16px;
  margin-top: var(--q-space-2);
}

/* ---- Scrollbar (thin, brand-tinted) ---- */
.q-scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--q-border-strong) transparent;
}
.q-scroll-x::-webkit-scrollbar { height: 6px; }
.q-scroll-x::-webkit-scrollbar-thumb { background: var(--q-border-strong); border-radius: var(--q-radius-pill); }

/* ---- Focus visibility (accessibility) ---- */
.q-theme :focus-visible {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}

/* ---- Skeleton / loading ---- */
.q-skeleton {
  background: linear-gradient(90deg, var(--q-bg-secondary) 25%, var(--q-border) 37%, var(--q-bg-secondary) 63%);
  background-size: 400% 100%;
  animation: q-skeleton-loading 1.4s ease infinite;
  border-radius: var(--q-radius-sm);
}
@keyframes q-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}