/**
 * VARIABLES.CSS
 * Design tokens del sitio. Cambiar estos valores alcanza para adaptar
 * la identidad visual completa a otra agencia.
 */

:root {
  /* ---- Color ---- */
  --color-black: #0a0a0a;
  --color-black-soft: #131313;
  --color-white: #ffffff;
  --color-offwhite: #f5f5f4;
  --color-gray-100: #f0f0ef;
  --color-gray-200: #e2e2e0;
  --color-gray-400: #9a9a97;
  --color-gray-600: #5c5c59;
  --color-gray-800: #262624;

  --color-accent: #ffd400;
  --color-accent-dark: #e6bf00; /* hover de superficies amarillas (uso decorativo, no como texto) */
  --color-accent-contrast: #8f7000; /* variante oscura del amarillo para texto/iconos sobre fondos claros — pasa AA 4.5:1 */
  --color-accent-ink: #1a1600; /* texto sobre fondo amarillo */

  --color-primary: var(--color-black);
  --color-secondary: var(--color-white);
  --color-background: var(--color-white);
  --color-background-dark: var(--color-black);
  --color-text: #141412;
  --color-text-on-dark: #f5f5f4;
  --color-text-muted: var(--color-gray-600);
  --color-text-muted-on-dark: #a8a8a4;
  --color-border: var(--color-gray-200);
  --color-border-on-dark: #2c2c2a;

  --color-success: #1f9d55;
  --color-warning: #e6a700;
  --color-danger: #d1453b;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe5a;

  /* ---- Tipografía ---- */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-base);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-3xl: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 5vw, 5rem);
  --header-height: 76px;
  --header-height-mobile: 64px;

  /* ---- Bordes / radios ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Sombras (uso moderado) ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.18);
  --shadow-accent: 0 8px 20px rgba(255, 212, 0, 0.25);

  /* ---- Vidrio (glassmorphism): botones y cards translúcidos con blur ---- */
  --glass-blur: blur(16px) saturate(170%);
  --glass-blur-sm: blur(10px) saturate(160%);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-bg-dark: rgba(22, 22, 22, 0.6);
  --glass-border-dark: rgba(255, 255, 255, 0.12);
  --glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 250ms var(--ease);
  --t-slow: 400ms var(--ease);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-whatsapp-float: 450;
  --z-ai-advisor: 460;
  --z-preloader: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}