/* ─── impeccable.style design foundation ─────────────────────────────
   emailinabox.com — dark + light mode
   Rules: Geist Sans, tinted neutrals (never pure #000/#fff), 4pt grid,
   clamp() fluid type, ease-out-quart motion, focus-visible, 44px touch.
   Bans: bounce/elastic, layout animations, glassmorphism, gradient-text.
   Source: buggazi.com impeccable.style palette (warm-tinted charcoal).
   ──────────────────────────────────────────────────────────────────── */

: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);

  /* Color: warm-tinted neutrals (buggazi palette, never pure #000/#fff) */
  --imp-dark: #0c0a08;
  --imp-dark-light: #161410;
  --imp-dark-medium: #24201a;
  --imp-gray-900: #131110;
  --imp-gray-800: #1e1c1a;
  --imp-gray-700: #2d2a26;
  --imp-gray-600: #4a4640;
  --imp-gray-500: #6b6660;
  --imp-gray-400: #9c9690;
  --imp-gray-300: #d1cdc8;
  --imp-gray-200: #e5e2dd;
  --imp-gray-100: #f3f1ee;
  --imp-gray-50: #f9f8f6;
  --imp-white: #faf9f7;

  /* Accent: Anthropic orange */
  --imp-accent: #d97757;
  --imp-accent-hover: #c4603f;
  --imp-accent-subtle: rgba(217, 119, 87, 0.12);

  /* Status */
  --imp-success: #22c55e;
  --imp-error: #ef4444;
  --imp-info: #3b82f6;

  /* Border */
  --imp-border: #e5e2dd;

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

/* ─── Dark Mode ──────────────────────────────────────────────────── */
/* Applied via body.imp-dark or via prefers-color-scheme */

body.imp-dark {
  background: var(--imp-dark);
  color: var(--imp-white);
  --ant-light: var(--imp-dark);
  --ant-dark: var(--imp-white);
  --ant-text: var(--imp-gray-300);
  --ant-text-secondary: var(--imp-gray-400);
  --ant-bg-secondary: var(--imp-dark-light);
  --ant-border: var(--imp-gray-700);
  --ant-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.imp-dark .navbar { background: var(--imp-dark) !important; border-bottom: 1px solid var(--imp-gray-700); }
body.imp-dark .navbar-brand img { filter: brightness(10); }
body.imp-dark .hero { background: var(--imp-dark); color: var(--imp-white); border-bottom-color: var(--imp-gray-700); }
body.imp-dark .hero h1 { color: var(--imp-white); }
body.imp-dark .hero .lead { color: var(--imp-gray-400); }
body.imp-dark .hero-product { background: var(--imp-dark-light); border-color: var(--imp-gray-700); }
body.imp-dark .feature-card { background: var(--imp-dark-light); border-color: var(--imp-gray-700); color: var(--imp-gray-300); }
body.imp-dark .feature-card:hover { border-color: var(--imp-accent); }
body.imp-dark .feature-card h4 { color: var(--imp-white); }
body.imp-dark .pricing-card { background: var(--imp-dark-light); border-color: var(--imp-gray-700); }
body.imp-dark .pricing-card:hover { border-color: var(--imp-accent); }
body.imp-dark .pricing-card h4, body.imp-dark .pricing-amount { color: var(--imp-white); }
body.imp-dark .pricing-example { background: var(--imp-dark-medium); }
body.imp-dark .pricing-example strong { color: var(--imp-white); }
body.imp-dark .problem-card { background: var(--imp-dark-light); border-color: var(--imp-gray-700); }
body.imp-dark .problem-card h4, body.imp-dark .problem-card .total { color: var(--imp-white); }
body.imp-dark .section-title { color: var(--imp-white); }
body.imp-dark .step-card p { color: var(--imp-gray-400); }
body.imp-dark .step-card h4 { color: var(--imp-white); }
body.imp-dark .faq-question { color: var(--imp-white); }
body.imp-dark .faq-answer { color: var(--imp-gray-400); }
body.imp-dark .compare-table th, body.imp-dark .compare-table td { border-bottom-color: var(--imp-gray-700); color: var(--imp-gray-300); }
body.imp-dark .compare-table thead th { background: var(--imp-dark-medium); color: var(--imp-gray-400); }
body.imp-dark .compare-table .col-us { background: rgba(217, 119, 87, 0.08); }
body.imp-dark .text-muted { color: var(--imp-gray-500) !important; }
body.imp-dark .btn-ghost { color: var(--imp-white); border-color: var(--imp-gray-600); }
body.imp-dark .btn-ghost:hover { background: var(--imp-dark-medium); }
body.imp-dark .btn-link { color: var(--imp-gray-300); }
body.imp-dark .btn-link:hover { color: var(--imp-accent); }
body.imp-dark a { color: var(--imp-accent); }

/* Sections with alt bg in dark mode */
body.imp-dark #social-proof,
body.imp-dark #how-it-works,
body.imp-dark #use-cases,
body.imp-dark #analytics,
body.imp-dark #roadmap { background: var(--imp-dark-light) !important; border-color: var(--imp-gray-700) !important; }

/* Roadmap cards */
body.imp-dark #roadmapCategories { background: var(--imp-dark-medium) !important; border-color: var(--imp-gray-700) !important; }
body.imp-dark .roadmap-cat { border-bottom-color: var(--imp-gray-700); }
body.imp-dark .roadmap-cat-name { color: var(--imp-white); }
body.imp-dark .roadmap-cat-bar { background: var(--imp-gray-700); }

/* ─── Light Mode (default for emailinabox) ───────────────────────── */
/* No class needed — light is default via anthropic-tokens.css */

/* ─── Dark/Light Toggle Button ───────────────────────────────────── */
.imp-mode-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ant-border, #e5e2dd);
  color: var(--ant-text-secondary, #6b6660);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color var(--duration-state, 250ms) var(--ease-default, ease),
              background var(--duration-state, 250ms) var(--ease-default, ease),
              border-color var(--duration-state, 250ms) var(--ease-default, ease);
}
.imp-mode-toggle:hover { background: var(--ant-bg-secondary, #f3f1ee); color: var(--ant-dark, #141413); }
body.imp-dark .imp-mode-toggle { border-color: var(--imp-gray-600); color: var(--imp-gray-400); }
body.imp-dark .imp-mode-toggle:hover { background: var(--imp-dark-medium); color: var(--imp-white); }

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