/* ============================================
   CARTOGRAFÍA DE LA AUSENCIA V2
   Sistema de diseño y variables CSS
   ============================================ */

:root {
  /* --- Paleta de colores (heredada de V1) --- */
  --morado-principal: #87477b;
  --morado-oscuro: #6b3562;
  --morado-claro: rgba(135, 71, 123, 0.6);
  --texto-marca: #f3edc9;
  --texto-blanco: #ffffff;
  --dorado-acento: #e2b021;
  --dorado-suave: rgba(226, 176, 33, 0.15);
  --fondo-oscuro: #1a0a16;
  --fondo-tarjeta: rgba(255, 255, 255, 0.92);
  --fondo-glass: rgba(135, 71, 123, 0.25);
  --sombra: rgba(0, 0, 0, 0.3);

  /* --- Tipografía --- */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Raleway', sans-serif;

  /* --- Escala tipográfica fluida --- */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.35vw, 1.1rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  --text-3xl: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);

  /* --- Espaciado --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* --- Bordes y radios --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 50%;

  /* --- Transiciones --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-reveal: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Z-index --- */
  --z-canvas: 1;
  --z-header: 100;
  --z-tooltip: 200;
  --z-modal: 300;
  --z-loading: 400;

  /* --- Glassmorphism --- */
  --glass-blur: blur(12px);
  --glass-bg: rgba(135, 71, 123, 0.2);
  --glass-border: 1px solid rgba(255, 255, 255, 0.12);
}