:root {
  --font-heading: 'Space Grotesk', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 16px 34px rgba(15, 23, 42, 0.14);

  --motion-fast: 180ms;
  --motion-base: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.title,
.brand {
  font-family: var(--font-heading);
  letter-spacing: -0.015em;
}

.brand.brand-home {
  text-decoration: none;
  color: inherit;
}

.brand.brand-home:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.45);
  outline-offset: 3px;
  border-radius: 12px;
}

.nav .links > a {
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #334155;
}

.nav .links > a:hover,
.nav .links > a.active {
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  border-color: #c7d2fe;
  color: #1e1b4b;
}

.nav .links > a.contact-link {
  position: relative;
  margin-left: 14px;
}

.nav .links > a.contact-link::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #cbd5e1;
}

.price,
.chip,
.badge,
.tag-chip,
#subtotal-price,
#total-price {
  font-family: var(--font-mono);
}

.muted,
.subtitle,
.small-text {
  font-weight: 500;
}

.card .account-username {
  color: #0f172a;
  font-weight: 800;
}

.card .row strong {
  color: #0f172a;
  font-weight: 700;
}

.card .muted {
  color: #475569;
}

.card,
.summary,
.checkout-panel,
.filters {
  border-radius: var(--radius-lg);
}

.card {
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-hover);
}

.btn {
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.btn:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.22);
}

/* Stagger reveal for product grids and feature cards */
.ds-stagger > * {
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  animation: ds-rise var(--motion-base) var(--ease-out) forwards;
}

.ds-stagger > *:nth-child(1) { animation-delay: 30ms; }
.ds-stagger > *:nth-child(2) { animation-delay: 70ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 110ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 150ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 190ms; }
.ds-stagger > *:nth-child(6) { animation-delay: 230ms; }
.ds-stagger > *:nth-child(7) { animation-delay: 270ms; }
.ds-stagger > *:nth-child(8) { animation-delay: 310ms; }
.ds-stagger > *:nth-child(9) { animation-delay: 350ms; }
.ds-stagger > *:nth-child(10) { animation-delay: 390ms; }
.ds-stagger > *:nth-child(11) { animation-delay: 430ms; }
.ds-stagger > *:nth-child(12) { animation-delay: 470ms; }

@keyframes ds-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile comfort: larger inputs for checkout flow */
@media (max-width: 768px) {
  .mobile-menu-links a.contact-link {
    margin-top: 8px;
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
    border-radius: 10px;
  }

  .form-email-input,
  .promo-input-row input,
  #buyer-email,
  #change-email-input,
  #promo-code-input {
    min-height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }

  #set-email,
  #change-email-btn,
  #apply-promo-btn,
  #remove-promo-btn {
    min-height: 46px;
    border-radius: 12px;
  }
}