/* ============================================================
   variables.css — ⭐ LA MARCA VIVE AQUÍ
   Todos los tokens de Balverde. Ningún otro archivo inventa
   colores, tamaños ni sombras: todo se deriva de aquí.
   Identidad: lujo sobrio, botánico, invitación de boda premium.
   ============================================================ */

:root {
  /* -------- Paleta de marca (no inventar colores) -------- */
  --verde-900: #081a13; /* fondo más profundo */
  --verde-850: #0a1f17; /* base oficial */
  --verde-800: #0e2a1e; /* base oficial (elevado) */
  --verde-700: #143726; /* superficies elevadas */
  --verde-600: #1c4a33; /* bordes/divisores verdes */

  --dorado: #c9a24b; /* dorado principal */
  --dorado-claro: #e6c878; /* dorado para brillos/acentos */
  --dorado-tenue: #9c7c39; /* dorado apagado para bordes finos */

  --crema: #e8e4d8; /* texto principal sobre verde */
  --crema-suave: #d9d4c5; /* texto secundario */
  --texto-tenue: #a9b8ac; /* texto terciario / verde grisáceo */

  /* -------- Roles semánticos (usar estos en componentes) -------- */
  --color-fondo: var(--verde-850);
  --color-superficie: var(--verde-800);
  --color-superficie-elevada: var(--verde-700);
  --color-acento: var(--dorado);
  --color-acento-brillo: var(--dorado-claro);
  --color-texto: var(--crema);
  --color-texto-suave: var(--crema-suave);
  --color-texto-tenue: var(--texto-tenue);
  --color-borde: rgba(201, 162, 75, 0.22); /* dorado a baja opacidad */
  --color-borde-fuerte: rgba(201, 162, 75, 0.45);

  /* -------- Tipografías -------- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Escala tipográfica fluida (clamp: móvil → escritorio) */
  --fs-display: clamp(3rem, 8vw, 6rem); /* hero */
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem); /* subtítulos */
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.78rem; /* texto sobre-título en mayúsculas */

  /* Tracking y line-height (sección 3: títulos ajustados, cuerpo generoso) */
  --track-titulo: -0.03em;
  --track-eyebrow: 0.34em;
  --lh-titulo: 1.08;
  --lh-cuerpo: 1.7;

  /* -------- Espaciado intencional (no pasos aleatorios) -------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Padding vertical de cada sección */
  --seccion-pad: clamp(4rem, 9vw, 8rem);
  /* Ancho máximo del contenido */
  --ancho-contenido: 1180px;
  --ancho-texto: 60ch;

  /* -------- Radios -------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* -------- Sombras tintadas en capas (nada de sombras planas) -------- */
  --sombra-sm:
    0 1px 2px rgba(8, 26, 19, 0.4),
    0 2px 8px rgba(8, 26, 19, 0.3);
  --sombra-md:
    0 4px 12px rgba(8, 26, 19, 0.45),
    0 12px 30px rgba(8, 26, 19, 0.35);
  --sombra-lg:
    0 8px 24px rgba(8, 26, 19, 0.5),
    0 24px 60px rgba(8, 26, 19, 0.45);
  /* Halo dorado para elementos destacados (hover de tarjetas/botones) */
  --halo-dorado: 0 0 0 1px rgba(201, 162, 75, 0.35), 0 10px 40px rgba(201, 162, 75, 0.14);

  /* -------- Profundidad (sistema de capas) -------- */
  --z-base: 1;
  --z-elevado: 10;
  --z-flotante: 100;
  --z-nav: 500;
  --z-modal: 1000;

  /* -------- Movimiento (solo transform/opacity, easing spring) -------- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 160ms;
  --dur-media: 280ms;
  --dur-lenta: 520ms;
}

/* Respeta a quien pide menos movimiento. */
@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;
  }
}