/* ==========================================================================
   VARIABLES Y DESIGN TOKENS — MARÍA DOMECQ (WHITE EDITORIAL PALETTE)
   ========================================================================== */

:root {
  /* Tipografías: Display Grotesque (Estilo Restart Hard de Foto 1) & Serif Editorial (Foto 2) */
  --font-display: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Paleta cromática unificada en blanco editorial */
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f3f5;
  
  --color-text: #111113;
  --color-text-secondary: #4a4a52;
  --color-text-muted: #8e8e96;
  
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-hover: rgba(0, 0, 0, 0.25);
  
  /* Acento y contrastes */
  --color-accent: #111113;
  --color-accent-hover: #000000;
  --color-accent-subtle: rgba(0, 0, 0, 0.05);
  --color-star: #111113;

  /* Espaciados modulares */
  --container-max-width: 1400px;
  --container-padding: clamp(1.25rem, 4vw, 3.5rem);
  --section-spacing: clamp(4.5rem, 8vw, 8rem);
  --gap-base: clamp(1rem, 2vw, 2rem);

  /* Marquee */
  --marquee-speed: 28s;

  /* Transiciones y easings editoriales */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.25s var(--ease-out-expo);
  --transition-normal: 0.45s var(--ease-out-expo);
  --transition-slow: 0.75s var(--ease-out-expo);

  /* Header Floating Pill */
  --header-height: 80px;

  /* Radios de borde */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Z-index hierarchy */
  --z-stars: 2;
  --z-base: 5;
  --z-nav: 90;
  --z-modal: 100;
  --z-lightbox: 110;
  --z-cursor: 999999;
}