/* ═══════════════════════════════════════════════════════════════════════════
   impeccable.style — Design Foundation for SlickTea
   ═══════════════════════════════════════════════════════════════════════════
   Based on impeccable.style (Apache 2.0)
   Adapted for SlickTea: SaaS landing pages + 30 TauTyga themes
   Loaded BEFORE theme CSS — provides base variables, motion, focus, touch
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Motion System (ease-out-quart, never bounce/elastic) ─────────────── */
:root {
  --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);
  --ease-toggle: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-micro: 150ms;
  --duration-state: 250ms;
  --duration-layout: 400ms;
  --duration-entrance: 600ms;

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

  /* Tinted Neutrals (never pure #000/#fff — chroma toward brand hue) */
  --imp-dark: #0c0a12;
  --imp-dark-light: #16131e;
  --imp-dark-medium: #241e30;
  --imp-gray-900: #131018;
  --imp-gray-800: #1e1a26;
  --imp-gray-700: #2d2838;
  --imp-gray-600: #4a4456;
  --imp-gray-500: #6b6578;
  --imp-gray-400: #9c96a8;
  --imp-gray-300: #d1cdd8;
  --imp-gray-200: #e5e2ea;
  --imp-gray-100: #f3f1f6;
  --imp-gray-50: #f9f8fb;
  --imp-white: #faf9f7;

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

/* ─── Light Mode (invert neutrals) ────────────────────────────────────── */
body.imp-light {
  --imp-dark: #faf9f7;
  --imp-dark-light: #f0eee9;
  --imp-dark-medium: #e0ddd6;
  --imp-gray-900: #f5f3f0;
  --imp-gray-800: #eae7e2;
  --imp-gray-700: #d8d4cd;
  --imp-gray-600: #8a8580;
  --imp-gray-500: #6a6560;
  --imp-gray-400: #4a4540;
  --imp-gray-300: #3a3530;
  --imp-gray-200: #2a2520;
  --imp-gray-100: #1a1510;
  --imp-white: #0c0a12;
}

/* Buttons with dark/colored backgrounds always keep white text */
body.imp-light .btn-primary,
body.imp-light .btn-gradient,
body.imp-light .btn-get-started,
body.imp-light .btn-buy {
  color: #faf9f7 !important;
}

/* ─── Base Resets ──────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Focus: scoped to landing elements ────────────────────────────────── */
#header a:focus-visible, #header button:focus-visible,
#main a:focus-visible, #main button:focus-visible,
#main input:focus-visible, #main textarea:focus-visible,
#footer a:focus-visible, #footer button:focus-visible {
  outline: 2px solid var(--imp-accent, #3b82f6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── tAI Widget header logo ───────────────────────────────────────────── */
.tai-logo { height: 28px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }

/* ─── Touch Targets: scoped to landing elements ───────────────────────── */
#header a, #header button,
#main a, #main button,
#footer a, #footer button {
  min-height: 44px;
}

/* ─── Smooth Motion: scoped to landing elements ───────────────────────── */
#header a, #header button,
#main a, #main button,
#footer a, #footer button {
  transition: all var(--duration-state) var(--ease-default);
}

/* ─── Button States: scoped to landing elements ───────────────────────── */
#main button:active,
#main .btn:active,
#footer button:active {
  transform: scale(0.97);
  transition-duration: var(--duration-micro);
}

/* ─── Typography Scale: scoped to landing elements ────────────────────── */
#hero h1, #main h1 { font-size: var(--imp-text-3xl); line-height: 1.1; }
#hero h2, #main h2 { font-size: var(--imp-text-2xl); line-height: 1.15; }
#main h3 { font-size: var(--imp-text-xl); line-height: 1.2; }
#main h4 { font-size: var(--imp-text-lg); line-height: 1.3; }
#main h5 { font-size: var(--imp-text-base); line-height: 1.4; }

/* ─── Dark-BG Typography Compensation (toggle: imp-darkbg) ────────────── */
.imp-darkbg {
  letter-spacing: 0.01em;
}

/* ─── Text Measure (toggle: imp-measure) ───────────────────────────────── */
.imp-measure p,
.imp-measure li,
.imp-measure .imp-text {
  max-width: 65ch;
}

/* ─── Hero/Section Entrance Stagger ────────────────────────────────────── */
@keyframes impFadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.imp-motion .imp-stagger > * {
  animation: impFadeSlideUp var(--duration-entrance) var(--ease-enter) both;
}

.imp-motion .imp-stagger > *:nth-child(1) { animation-delay: 0ms; }
.imp-motion .imp-stagger > *:nth-child(2) { animation-delay: 50ms; }
.imp-motion .imp-stagger > *:nth-child(3) { animation-delay: 100ms; }
.imp-motion .imp-stagger > *:nth-child(4) { animation-delay: 150ms; }
.imp-motion .imp-stagger > *:nth-child(5) { animation-delay: 200ms; }
.imp-motion .imp-stagger > *:nth-child(6) { animation-delay: 250ms; }
.imp-motion .imp-stagger > *:nth-child(7) { animation-delay: 300ms; }
.imp-motion .imp-stagger > *:nth-child(8) { animation-delay: 350ms; }
.imp-motion .imp-stagger > *:nth-child(9) { animation-delay: 400ms; }
.imp-motion .imp-stagger > *:nth-child(10) { animation-delay: 450ms; }

/* ─── Dark/Light Mode Toggle Button ────────────────────────────────────── */
.imp-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #d1cdd8 !important;
  background: transparent !important;
  color: #444 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: all 250ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  overflow: visible !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.imp-mode-toggle:hover {
  background: rgba(0,0,0,0.08) !important;
}

body.imp-dark .imp-mode-toggle {
  border-color: #4a4456 !important;
  color: #d1cdd8 !important;
}

body.imp-dark .imp-mode-toggle:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME OVERRIDES — Applied to ALL 30 TauTyga Bootstrap themes
   These rules enhance third-party theme CSS with impeccable.style quality.
   Loaded BEFORE theme CSS so themes can override where needed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Override all theme transitions to use impeccable motion ──────────── */
.imp-motion .hero a,
.imp-motion .hero button,
.imp-motion #hero a,
.imp-motion #hero button,
.imp-motion .navbar a,
.imp-motion #header a,
.imp-motion .nav-menu a,
.imp-motion .btn,
.imp-motion .card,
.imp-motion .portfolio-item,
.imp-motion .team-member,
.imp-motion .pricing-box,
.imp-motion .service-box,
.imp-motion .feature-box,
.imp-motion .testimonial-item {
  transition: all var(--duration-state) var(--ease-default);
}

/* ─── Hero entrance animation ──────────────────────────────────────────── */
.imp-motion #hero .container,
.imp-motion .hero .container,
.imp-motion section:first-of-type .container {
  animation: impFadeSlideUp var(--duration-entrance) var(--ease-enter) both;
}

/* ─── Section entrance on scroll (backup when AOS is not loaded) ───────── */
.imp-motion section .section-title {
  animation: impFadeIn var(--duration-entrance) var(--ease-enter) both;
}

/* ─── Card hover — use transform not layout props ──────────────────────── */
.imp-motion .card:hover,
.imp-motion .portfolio-item:hover,
.imp-motion .service-box:hover,
.imp-motion .feature-box:hover,
.imp-motion .pricing-box:hover {
  transform: translateY(-4px);
  transition: transform var(--duration-state) var(--ease-default),
              box-shadow var(--duration-state) var(--ease-default);
}

/* ─── Footer — tinted neutrals instead of pure black ───────────────────── */
#footer,
.footer,
footer {
  background-color: var(--imp-dark, #0c0a12);
  color: var(--imp-white, #faf9f7);
}

#footer a,
.footer a,
footer a {
  color: var(--imp-gray-400, #9c96a8);
}

#footer a:hover,
.footer a:hover,
footer a:hover {
  color: var(--imp-white, #faf9f7);
}

/* ─── Section alternating backgrounds — tinted, not pure ───────────────── */
.section-bg,
section.section-bg {
  background-color: var(--imp-gray-50, #f9f8fb);
}

/* ─── Focus-visible for theme elements ─────────────────────────────────── */
.imp-focus .btn:focus-visible,
.imp-focus .nav-link:focus-visible,
.imp-focus .navbar-brand:focus-visible,
.imp-focus .get-started-btn:focus-visible {
  outline: 2px solid var(--imp-accent, #3b82f6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Responsive touch targets for theme elements ──────────────────────── */
.imp-touch .btn,
.imp-touch .nav-link,
.imp-touch .get-started-btn,
.imp-touch .navbar-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ─── Loading state for buttons ────────────────────────────────────────── */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
}

.btn[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: impSpin 600ms linear infinite;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
}

@keyframes impSpin {
  to { transform: rotate(360deg); }
}

/* ─── Skeleton loading placeholder ─────────────────────────────────────── */
.imp-skeleton {
  background: linear-gradient(90deg, var(--imp-gray-200) 25%, var(--imp-gray-100) 50%, var(--imp-gray-200) 75%);
  background-size: 200% 100%;
  animation: impShimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes impShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}