/* ============================================================
   CAUXE · tokens.css
   Variables, tipografía, reset y utilidades base
   ============================================================ */

:root {
  /* Paleta corporativa */
  --cauxe-deep: #0A1F44;
  --cauxe-deep-2: #102A5C;
  --cauxe-deep-3: #060F22;
  --cauxe-flow: #1976D2;
  --cauxe-flow-light: #4A9EE8;
  --cauxe-spark: #00D4FF;
  --cauxe-spark-glow: rgba(0, 212, 255, 0.35);
  --cauxe-sand: #F5F0E8;
  --cauxe-sand-2: #FAF6EF;
  --cauxe-white: #FFFFFF;
  --cauxe-charcoal: #1A1A2E;
  --cauxe-gray: #6B7280;
  --cauxe-gray-light: #E5E7EB;
  --cauxe-gray-soft: #F3F4F6;

  /* Semánticos */
  --cauxe-success: #059669;
  --cauxe-success-soft: #D1FAE5;
  --cauxe-warn: #D97706;
  --cauxe-warn-soft: #FEF3C7;
  --cauxe-danger: #DC2626;
  --cauxe-danger-soft: #FEE2E2;

  /* Apps externas */
  --whatsapp-green: #25D366;
  --whatsapp-dark: #075E54;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 31, 68, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 31, 68, 0.12);
  --shadow-xl: 0 24px 64px rgba(10, 31, 68, 0.16);
  --shadow-glow: 0 0 60px rgba(0, 212, 255, 0.25);

  /* Radios */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 100px;
}

/* Reset moderno */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  color: var(--cauxe-charcoal);
  background: var(--cauxe-white);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }

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

/* Focus visible (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--cauxe-spark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utilidades base */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Animación base reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Animaciones globales */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
}