/* ═══════════════════════════════════════════════════════════════════════════
 * impeccable.style — WeSell.Cloud Design Foundation
 * 6 CSS toggle classes activated by body class composition
 * Based on: https://github.com/pbakaus/impeccable (Apache 2.0)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Foundation Variables ──────────────────────────────────────────────── */

:root {
  /* Motion: ease-out-quart default (no bounce/elastic) */
  --ease-default: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-micro: 150ms;
  --duration-state: 250ms;
  --duration-layout: 400ms;
  --duration-entrance: 600ms;

  /* Type scale: 1.333x perfect fourth with clamp() fluid sizing */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.5vw + 0.5rem, 1.333rem);
  --text-xl: clamp(1.333rem, 2vw + 0.5rem, 1.777rem);
  --text-2xl: clamp(1.777rem, 3vw + 0.5rem, 2.369rem);
  --text-3xl: clamp(2rem, 3.5vw + 0.5rem, 3.157rem);
  --text-4xl: clamp(2.25rem, 5vw + 0.5rem, 4.209rem);

  /* Spatial: 4pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

/* ─── 1. imp-motion: Smooth transitions ────────────────────────────────── */

.imp-motion a,
.imp-motion button,
.imp-motion .btn,
.imp-motion .card,
.imp-motion .product-card,
.imp-motion .nav-link,
.imp-motion input,
.imp-motion select,
.imp-motion textarea {
  transition: all var(--duration-state) var(--ease-default);
}

.imp-motion .card:hover,
.imp-motion .product-card:hover {
  transform: translateY(-2px);
}

.imp-motion .btn:hover,
.imp-motion a:hover {
  transition-duration: var(--duration-micro);
}

/* Hero/section entrance stagger */
@keyframes impFadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 2. imp-focus: Focus-visible rings ────────────────────────────────── */

.imp-focus a:focus-visible,
.imp-focus button:focus-visible,
.imp-focus [role="button"]:focus-visible,
.imp-focus input:focus-visible,
.imp-focus textarea:focus-visible,
.imp-focus select:focus-visible,
.imp-focus .btn:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── 3. imp-typo: Typography scale ────────────────────────────────────── */

.imp-typo h1 { font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.02em; }
.imp-typo h2 { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.015em; }
.imp-typo h3 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; }
.imp-typo h4 { font-size: var(--text-lg); line-height: 1.25; }
.imp-typo p, .imp-typo li { line-height: 1.5; }

/* ─── 4. imp-darkbg: Dark background compensation ─────────────────────── */

.imp-darkbg [data-dark-mode="true"],
.imp-darkbg .dark-theme,
.imp-darkbg .bg-dark,
.imp-darkbg [style*="background-color: #1"],
.imp-darkbg [style*="background-color: #0"] {
  letter-spacing: 0.01em;
}

.imp-darkbg .bg-dark p,
.imp-darkbg .dark-theme p {
  line-height: 1.6;
}

/* ─── 5. imp-touch: Touch target minimums ──────────────────────────────── */

.imp-touch a,
.imp-touch button,
.imp-touch .btn,
.imp-touch [role="button"],
.imp-touch .nav-link,
.imp-touch input,
.imp-touch select,
.imp-touch textarea {
  min-height: 44px;
}

.imp-touch .btn-sm { min-height: 36px; }

/* ─── 6. imp-measure: Text measure (max-width) ────────────────────────── */

.imp-measure .product-description p,
.imp-measure .blog-content p,
.imp-measure .page-content p,
.imp-measure .about-text p,
.imp-measure .shop-description p,
.imp-measure .card-text {
  max-width: 65ch;
}

/* ─── Utility Classes ──────────────────────────────────────────────────── */

.imp-stagger > * {
  animation: impFadeSlideUp var(--duration-entrance) var(--ease-enter) both;
}
.imp-stagger > *:nth-child(1) { animation-delay: 0ms; }
.imp-stagger > *:nth-child(2) { animation-delay: 50ms; }
.imp-stagger > *:nth-child(3) { animation-delay: 100ms; }
.imp-stagger > *:nth-child(4) { animation-delay: 150ms; }
.imp-stagger > *:nth-child(5) { animation-delay: 200ms; }
.imp-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* ─── Print ────────────────────────────────────────────────────────────── */

@media print {
  .imp-motion * { transition: none !important; animation: none !important; }
}