/**
 * impeccable.style foundation — SSLWebsites.com
 * Based on the impeccable.style specification (Apache 2.0)
 * 7 domains: Typography, Color, Spatial, Motion, Interaction, Responsive, Voice
 */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== CSS VARIABLES ===== */
:root {
  /* Typography: System stack (no reflex-reject fonts) */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', 'Consolas', monospace;

  /* Type Scale: 1.333x Perfect Fourth (clamp for fluid sizing) */
  --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);

  /* Color: Tinted Neutrals (chroma 0.005-0.015, warm undertone) */
  --primary: #38BDF8;
  --primary-dark: #0EA5E9;
  --primary-light: #7dd3fc;
  --secondary: #16a34a;
  --accent: #f59e0b;

  --dark: #0c0e14;
  --dark-alt: #12151e;
  --gray-50: #f8f7f5;
  --gray-100: #f1efe9;
  --gray-200: #e2dfda;
  --gray-300: #cbc8c2;
  --gray-500: #6b6862;
  --gray-600: #4a4742;
  --gray-700: #35322e;
  --gray-800: #1e1c19;
  --gray-900: #0f0e0c;
  --white: #faf9f7;

  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  --gradient-dark: linear-gradient(180deg, #0c0e14 0%, #12151e 100%);

  /* Motion: ease-out-quart (no bounce, no 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);
  --ease-toggle: cubic-bezier(0.65, 0, 0.35, 1);

  /* Duration: tiered motion timing */
  --duration-micro: 150ms;
  --duration-state: 250ms;
  --duration-layout: 400ms;
  --duration-entrance: 600ms;

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

/* ===== BASE TYPOGRAPHY ===== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--gray-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Body text measure: max 65ch */
p, li, blockquote {
  max-width: 65ch;
}

/* ===== FOCUS: :focus-visible, never outline:none without replacement ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== TOUCH TARGETS: min 44px ===== */
a, button, [role="button"] {
  min-height: 44px;
}

/* Button active state */
button:active,
[role="button"]:active {
  transform: scale(0.97);
  transition-duration: var(--duration-micro);
}

button:disabled,
button[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== ENTRANCE ANIMATIONS ===== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Stagger support: use style="--i: 0" on elements */
.imp-stagger {
  opacity: 0;
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) forwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

/* ===== DARK BACKGROUND COMPENSATION ===== */
.imp-dark-bg {
  letter-spacing: 0.01em;
}
.imp-dark-bg p,
.imp-dark-bg li,
.imp-dark-bg span {
  line-height: 1.6;
  letter-spacing: 0.015em;
}

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