/**
 * impeccable.style — ISP2Go Design Foundation
 * Ported from bandsaas.com impeccable system
 * 7 domains: Typography, Color, Spatial, Motion, Interaction, Responsive, Voice
 * Register: PRODUCT (SaaS dashboard) + HYBRID (landing/marketing pages)
 */

/* ═══════════════════════════════════════════════════════════════
   1. TYPOGRAPHY — fluid scale, measure, rhythm
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fluid type scale — major third (1.25x) */
  --imp-text-xs: 0.75rem;
  --imp-text-sm: 0.875rem;
  --imp-text-base: 1rem;
  --imp-text-lg: clamp(1.125rem, 1.2vw + 0.5rem, 1.25rem);
  --imp-text-xl: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  --imp-text-2xl: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --imp-text-3xl: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem);
  --imp-text-4xl: clamp(2.25rem, 3vw + 0.5rem, 3.5rem);

  /* Line height: heading tight, body relaxed */
  --imp-lh-heading: 1.15;
  --imp-lh-body: 1.6;
  --imp-lh-tight: 1.3;

  /* Measure: max 65ch for body text readability */
  --imp-measure: 65ch;

  /* Font families — Geist Sans loaded via CDN (off reflex-reject list) */
  --imp-font-body: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --imp-font-heading: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --imp-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Letter spacing */
  --imp-ls-tight: -0.02em;
  --imp-ls-normal: 0;
  --imp-ls-wide: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   2. COLOR — tinted neutrals, never pure #000/#fff
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ISP2Go brand: professional blue for trust + warm neutrals */
  --imp-brand: #1e40af;
  --imp-brand-dark: #1e3a8a;
  --imp-brand-light: #3b82f6;
  --imp-brand-subtle: #dbeafe;

  /* Accent: warm amber for CTAs */
  --imp-accent: #d97706;
  --imp-accent-hover: #b45309;
  --imp-accent-subtle: #fef3c7;

  /* Tinted neutrals — NOT pure black/white, chroma toward blue-warm */
  --imp-dark: #0c0f1a;       /* near-black, blue tint */
  --imp-white: #faf9f7;      /* near-white, warm tint */
  --imp-gray-950: #111318;
  --imp-gray-900: #1a1d27;
  --imp-gray-800: #2a2d38;
  --imp-gray-700: #3f4350;
  --imp-gray-600: #565b6b;
  --imp-gray-500: #6e7384;
  --imp-gray-400: #8b8f9e;
  --imp-gray-300: #b0b4c0;
  --imp-gray-200: #d4d6dd;
  --imp-gray-100: #ecedf0;
  --imp-gray-50: #f5f5f7;

  /* Semantic colors */
  --imp-success: #059669;
  --imp-warning: #d97706;
  --imp-danger: #dc2626;
  --imp-info: #0284c7;

  /* Gradients */
  --imp-gradient-brand: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  --imp-gradient-dark: linear-gradient(180deg, #0c0f1a 0%, #1a1d27 100%);
  --imp-gradient-warm: linear-gradient(135deg, #faf9f7 0%, #f5f5f7 100%);
}

/* ═══════════════════════════════════════════════════════════════
   3. SPATIAL — 4pt grid, semantic spacing
   ═══════════════════════════════════════════════════════════════ */

:root {
  --imp-space-1: 4px;
  --imp-space-2: 8px;
  --imp-space-3: 12px;
  --imp-space-4: 16px;
  --imp-space-5: 20px;
  --imp-space-6: 24px;
  --imp-space-8: 32px;
  --imp-space-10: 40px;
  --imp-space-12: 48px;
  --imp-space-16: 64px;
  --imp-space-20: 80px;
  --imp-space-24: 96px;

  /* Semantic spacing */
  --imp-section-gap: clamp(3rem, 6vw, 6rem);
  --imp-card-padding: var(--imp-space-6);
  --imp-card-radius: 12px;
  --imp-card-shadow: 0 1px 3px rgba(12, 15, 26, 0.06), 0 1px 2px rgba(12, 15, 26, 0.04);
}

/* ═══════════════════════════════════════════════════════════════
   4. MOTION — ease-out-quart, no bounce/elastic
   ═══════════════════════════════════════════════════════════════ */

:root {
  --imp-ease: cubic-bezier(0.25, 1, 0.5, 1);         /* ease-out-quart */
  --imp-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);   /* entrance */
  --imp-ease-leave: cubic-bezier(0.7, 0, 0.84, 0);   /* exit */

  --imp-dur-micro: 150ms;
  --imp-dur-state: 250ms;
  --imp-dur-layout: 400ms;
  --imp-dur-entrance: 600ms;
}

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

/* Stagger utility: set --i via inline style */
.imp-stagger { animation: impFadeSlideUp var(--imp-dur-entrance) var(--imp-ease-enter) calc(var(--i, 0) * 75ms) both; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. INTERACTION — 8 states, focus-visible, touch targets
   ═══════════════════════════════════════════════════════════════ */

/* Focus rings — keyboard only */
:focus-visible {
  outline: 2px solid var(--imp-brand-light);
  outline-offset: 3px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Touch targets — 44px minimum */
a, button, [role="button"], input, select, textarea, summary {
  min-height: 44px;
}

input[type="checkbox"], input[type="radio"] {
  min-height: auto; /* Override for inline controls */
}

/* ═══════════════════════════════════════════════════════════════
   6. RESPONSIVE — mobile-first, fluid, pointer queries
   ═══════════════════════════════════════════════════════════════ */

/* Fluid container */
.imp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--imp-space-6);
}

@media (min-width: 768px) {
  .imp-container { padding: 0 var(--imp-space-8); }
}

/* Touch device hover suppression */
@media (hover: none) {
  .imp-hover-only { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   7. THEME BRIDGE — connect to tenant theming
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Light mode defaults (ISP2Go brand) */
  --theme-bg: var(--imp-white);
  --theme-bg-secondary: var(--imp-gray-50);
  --theme-bg-tertiary: var(--imp-gray-100);
  --theme-text: var(--imp-gray-900);
  --theme-text-secondary: var(--imp-gray-600);
  --theme-text-muted: var(--imp-gray-400);
  --theme-accent: var(--imp-brand);
  --theme-accent-hover: var(--imp-brand-dark);
  --theme-accent-subtle: var(--imp-brand-subtle);
  --theme-card-bg: #ffffff;
  --theme-card-shadow: var(--imp-card-shadow);
  --theme-card-radius: var(--imp-card-radius);
  --theme-border: var(--imp-gray-200);
  --theme-border-light: var(--imp-gray-100);
  --theme-header-bg: rgba(255, 255, 255, 0.85);
  --theme-header-blur: blur(12px) saturate(180%);
  --theme-sidebar-bg: var(--imp-white);
  --theme-sidebar-text: var(--imp-gray-700);
  --theme-sidebar-active: var(--imp-brand);
  --theme-btn-primary-bg: var(--imp-brand);
  --theme-btn-primary-text: #ffffff;
  --theme-input-bg: #ffffff;
  --theme-input-border: var(--imp-gray-200);
  --theme-input-focus-border: var(--imp-brand-light);
  --theme-focus-color: var(--imp-brand-light);
  --theme-font-family: var(--imp-font-body);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — .imp-dark class on body
   ═══════════════════════════════════════════════════════════════ */

.imp-dark {
  --theme-bg: var(--imp-gray-950);
  --theme-bg-secondary: var(--imp-gray-900);
  --theme-bg-tertiary: var(--imp-gray-800);
  --theme-text: var(--imp-gray-100);
  --theme-text-secondary: var(--imp-gray-300);
  --theme-text-muted: var(--imp-gray-500);
  --theme-accent: var(--imp-brand-light);
  --theme-accent-hover: #60a5fa;
  --theme-accent-subtle: rgba(59, 130, 246, 0.15);
  --theme-card-bg: var(--imp-gray-900);
  --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --theme-border: var(--imp-gray-700);
  --theme-border-light: var(--imp-gray-800);
  --theme-header-bg: rgba(17, 19, 24, 0.9);
  --theme-sidebar-bg: var(--imp-gray-950);
  --theme-sidebar-text: var(--imp-gray-300);
  --theme-btn-primary-bg: var(--imp-brand-light);
  --theme-btn-primary-text: #ffffff;
  --theme-input-bg: var(--imp-gray-800);
  --theme-input-border: var(--imp-gray-700);
  --theme-input-focus-border: var(--imp-brand-light);

  /* Dark bg compensation — improved readability */
  letter-spacing: 0.01em;
  --imp-lh-body: 1.65;
}

.imp-dark body, body.imp-dark {
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* ═══════════════════════════════════════════════════════════════
   ANTI-PATTERNS — guardrails
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL — IntersectionObserver-driven section fade-in
   ═══════════════════════════════════════════════════════════════ */

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

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

/* ═══════════════════════════════════════════════════════════════
   TEXT MEASURE — max 65ch for body readability
   ═══════════════════════════════════════════════════════════════ */

.imp-measure { max-width: var(--imp-measure); }
.imp-measure-wide { max-width: 80ch; }

/* ═══════════════════════════════════════════════════════════════
   ANTI-PATTERNS — guardrails
   ═══════════════════════════════════════════════════════════════ */

/* Never pure black text on white — use tinted neutrals */
/* Never pure white background — use --imp-white (#faf9f7) */
/* Never animate width/height/top/left/margin — use transform+opacity */
/* Never outline:none without :focus-visible replacement */
/* Never bounce/elastic easing — use ease-out-quart */
/* Cards only when truly best — avoid lazy card-for-everything */