/* ─── impeccable.style design foundation ─────────────────────────────
   Adapted for emailinabox.com (Anthropic palette, SaaS register)
   Source: bandsaas.com impeccable-head partial
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Typography: Geist Sans (off reflex-reject list) */
  --font-body: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* 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);

  /* 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;

  /* Override font token to Geist */
  --ant-font: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --bs-font-sans-serif: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ─── Base resets ──────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* ─── imp-typo: fluid typography scale ─────────────────────────────── */
.imp-typo h1 { font-size: var(--text-2xl); }
.imp-typo h2 { font-size: var(--text-xl); }
.imp-typo h3 { font-size: var(--text-lg); }
.imp-typo h4 { font-size: var(--text-base); }
.imp-typo p, .imp-typo li { font-size: var(--text-base); line-height: 1.6; }

/* ─── imp-motion: smooth transitions ──────────────────────────────── */
.imp-motion a,
.imp-motion button,
.imp-motion [role="button"],
.imp-motion input,
.imp-motion textarea,
.imp-motion select {
  transition: all var(--duration-state) var(--ease-default);
}

.imp-motion .feature-card,
.imp-motion .pricing-card,
.imp-motion .compliance-card,
.imp-motion .problem-card,
.imp-motion .card {
  transition: border-color var(--duration-state) var(--ease-default),
              box-shadow var(--duration-state) var(--ease-default),
              transform var(--duration-state) var(--ease-default);
}

/* ─── imp-focus: keyboard accessibility ────────────────────────────── */
.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 {
  outline: 2px solid var(--ant-primary, #d97757);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── imp-touch: 44px minimum touch targets ────────────────────────── */
.imp-touch a,
.imp-touch button,
.imp-touch [role="button"] {
  min-height: 44px;
}

/* ─── imp-darkbg: night mode compensation ──────────────────────────── */
.imp-darkbg .compliance-section,
.imp-darkbg .cta-bottom,
.imp-darkbg .bg-dark {
  letter-spacing: 0.01em;
  line-height: 1.65;
}

/* ─── imp-measure: text readability (65ch line limit) ──────────────── */
.imp-measure p {
  max-width: 65ch;
}
.imp-measure .text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* ─── Entrance animation ──────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.imp-entrance {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-entrance) var(--ease-enter),
              transform var(--duration-entrance) var(--ease-enter);
}

.imp-entrance.visible {
  opacity: 1;
  transform: translateY(0);
}