/**
 * impeccable.style — Design Quality Foundation
 * Cacheroo — SaaS/Product Register
 *
 * 7 design domains: typography, color, spatial, motion, interaction, responsive, UX writing
 * Zero-LLM anti-pattern prevention built into token choices.
 */

/* ================================
   DESIGN TOKENS
   ================================ */
:root {
  /* ── Typography Scale (1.333 — perfect fourth) ── */
  --text-xs: 0.75rem;
  --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);

  /* ── Typography Rhythm ── */
  --lh-heading: 1.1;
  --lh-body: 1.5;
  --lh-loose: 1.7;
  --measure: 65ch;

  /* ── Tinted Neutrals (never pure black/white) ── */
  --dark: #0c0a12;
  --dark-hover: #1e1b26;
  --white: #faf9f7;
  --gray-900: #131018;
  --gray-800: #2a2632;
  --gray-700: #3d3847;
  --gray-600: #5c5763;
  --gray-500: #7a7580;
  --gray-400: #9a959f;
  --gray-300: #c4c0c9;
  --gray-200: #e0dde4;
  --gray-100: #f3f1f6;
  --gray-50: #f8f7fa;

  /* ── Motion (ease-out-quart, 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: 350ms;
  --duration-entrance: 600ms;

  /* ── Focus ── */
  --focus-ring: 2px solid var(--accent, #d4a574);
  --focus-offset: 3px;
}

/* ================================
   TYPOGRAPHY — System Font Stack
   (Inter is reflex-reject; system fonts are the product-register default)
   ================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark background compensation: +line-height, +letter-spacing, weight bump */
.imp-darkbg,
[data-theme="dark"],
.cta-section,
.footer,
.sc-header,
[style*="background"][style*="#1"] {
  letter-spacing: 0.01em;
}

/* Measure cap for body text */
.imp-measure p,
.imp-measure li,
article p,
article li {
  max-width: var(--measure);
}

/* ================================
   FOCUS — :focus-visible, never outline:none without replacement
   ================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* ================================
   TOUCH TARGETS — 44px minimum globally
   ================================ */
a, button, [role="button"], input[type="checkbox"], input[type="radio"],
.nav-item, .nav-link {
  min-height: 44px;
  min-width: 44px;
}

/* Inline links don't need 44px height */
p a, li a, span a, td a {
  min-height: auto;
  min-width: auto;
}

/* ================================
   MOTION — Entrance Animations (staggered fadeSlideUp)
   ================================ */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Stagger pattern: apply --i per element for stagger offset */
.imp-stagger {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) calc(var(--i, 0) * 75ms) both;
}

/* Hero entrance stagger */
.hero-badge,
.hero-section .badge {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 0ms both;
}

.hero-section h1,
.hero-content h1 {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 100ms both;
}

.hero-section .lead,
.hero-content .lead {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 150ms both;
}

.hero-stats {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 200ms both;
}

.hero-actions {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 250ms both;
}

.hero-badges {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 300ms both;
}

.hero-image,
.hero-section .col-lg-6:last-child {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 350ms both;
}

/* Feature card stagger */
.feature-card {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) calc(var(--i, 0) * 75ms + 200ms) both;
}

/* Section entrance */
.features-section .text-center,
.pricing-section .text-center,
.comparison-section .text-center,
[data-section-title] {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 0ms both;
}

/* ================================
   TRANSITIONS — smooth state changes, allowed properties only
   (never animate width/height/top/left/margin)
   ================================ */
a, button, .btn, .nav-item, .feature-card, .pricing-card, .stat-card,
input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--duration-state);
  transition-timing-function: var(--ease-default);
}

/* ================================
   REDUCED MOTION — respect user preferences
   ================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================
   RESPONSIVE — mobile-first, content-driven breakpoints
   ================================ */
@media (pointer: coarse) {
  /* Touch devices: larger targets */
  a, button, [role="button"] {
    min-height: 48px;
    min-width: 48px;
  }

  p a, li a, span a, td a {
    min-height: auto;
    min-width: auto;
  }
}