/* ═══════════════════════════════════════════════════════════
   Soledad Data Solutions — Site Stylesheet
   Zone-based design system with CSS custom properties
   ═══════════════════════════════════════════════════════════ */

/* ── Zone A: Soledad Signature (Light) ── */
[data-zone="a"] {
  --bg-base: #F0F4F8;
  --bg-surface: #FFFFFF;
  --bg-elevated: #E8EDF2;
  --bg-hero: #E3EBF3;
  --primary: #E8922A;
  --primary-dark: #D4740F;
  --primary-light: #F5B94E;
  --secondary: #1B3555;
  --accent: #2C6E8A;
  --text-primary: #0D1520;
  --text-body: #334155;
  --text-muted: #64748B;
  --border: #CBD5E1;
  --success: #16A34A;
  --warning: #D97706;
  --error: #DC2626;
  --info: #2563EB;
}

/* ── Zone B: Summit Gold (Enterprise) ── */
[data-zone="b"] {
  --bg-base: #0F1419;
  --bg-surface: #1A2332;
  --bg-elevated: #243447;
  --primary: #F59E0B;
  --primary-dark: #D97706;
  --primary-light: #FCD34D;
  --secondary: #1E3A5F;
  --accent: #2D5F8A;
  --text-primary: #F8FAFC;
  --text-body: #CBD5E1;
  --text-muted: #64748B;
  --border: rgba(255,255,255,0.08);
  --success: #16A34A;
  --warning: #D97706;
  --error: #DC2626;
  --info: #2563EB;
}

/* ── Zone C: Ember Forge (CracksU) ── */
[data-zone="c"] {
  --bg-base: #0A1210;
  --bg-surface: #12201A;
  --bg-elevated: #1A2E25;
  --bg-deep: #071A12;
  --primary: #EA580C;
  --primary-dark: #C2410C;
  --primary-light: #FB923C;
  --green-accent: #22C55E;
  --green-muted: #166534;
  --accent: #78350F;
  --text-primary: #F0FDF4;
  --text-body: #D1D5DB;
  --text-muted: #6B7280;
  --border: rgba(34,197,94,0.12);
  --success: #22C55E;
  --warning: #D97706;
  --error: #DC2626;
  --info: #2563EB;
}

/* ── Alpine.js Cloak (hide elements until Alpine initializes) ── */
[x-cloak] { display: none !important; }

/* ── Base Reset & Typography ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Overline label ── */
.overline {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ── Zone B Watermark ── */
.watermark-section {
  position: relative;
}

.watermark-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/sales_rep_4.png') center/cover no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.watermark-section > * {
  position: relative;
  z-index: 1;
}

/* ── Scroll Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger support */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── CracksU Logo Inversion (dark bg) ── */
.cu-logo-invert {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* ── Card Hover Effects ── */
.card-hover {
  transition: all 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── Hero responsive headline ── */
.hero-headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

/* ── Chat widget mobile ── */
@media (max-width: 640px) {
  .chat-panel {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 80vh !important;
  }
}

/* ── Image fallback gradient ── */
img.zone-a-fallback { background: linear-gradient(135deg, #E3EBF3, #F0F4F8); }
img.zone-b-fallback { background: linear-gradient(135deg, #1A2332, #0F1419); }
img.zone-c-fallback { background: linear-gradient(135deg, #12201A, #0A1210); }

/* ── Skip to content (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}