:root {
  /* === PALETA PROFESIONAL ARENA Y AGUA === */
  /* Colores principales con mayor contraste */
  --primary-water: #2E6A7A; /* Agua profunda para textos principales */
  --secondary-water: #4A8AA0; /* Agua media para elementos secundarios */
  --accent-water: #6B9BB3; /* Agua clara para hover y selección */
  --light-water: #91C0D4; /* Agua suave para bordes y separadores */
  --detail-water: #A2D2DC; /* Agua muy suave para detalles e iconos */
  
  /* Fondos mejorados */
  --bg-sand: #F2E8D5; /* Arena más clara - fondo principal */
  --bg-cream: #F8F4E6; /* Crema muy suave - fondos de secciones internas */
  --bg-card: #FFFFFF; /* Blanco puro para cards */
  
  /* Mantener compatibilidad con nombres anteriores */
  --primary-gold: var(--primary-water);
  --secondary-gold: var(--accent-water);
  --accent-gold: var(--secondary-water);
  --primary-teal: var(--primary-water);
  --secondary-teal: var(--accent-water);
  --accent-teal: var(--light-water);
  
  /* Compatibilidad con código existente */
  --primary-color: var(--primary-water);
  --primary-dark: var(--primary-water);
  --primary-light: var(--accent-water);
  --secondary-color: var(--accent-water);
  --secondary-dark: var(--secondary-water);
  --secondary-light: var(--light-water);
  --accent-color: var(--secondary-water);
  --accent-dark: var(--primary-water);
  --accent-light: var(--light-water);
  
  
  /* Fondos profesionales actualizados */
  --bg-dark: var(--bg-sand); /* Fondo principal arena */
  --bg-secondary: var(--bg-cream); /* Fondo secundario crema */
  --bg-overlay: rgba(242, 232, 213, 0.95); /* Overlay arena */
  --bg-glass: var(--bg-card); /* Cards con fondo blanco */
  --bg-glass-hover: rgba(107, 155, 179, 0.1); /* Hover sutil agua */
  --bg-glass-active: rgba(74, 138, 160, 0.15); /* Activo agua media */
  --bg-glass-strong: var(--bg-card); /* Cards fuertes blanco */
  --bg-glass-light: rgba(248, 244, 230, 0.8); /* Vidrio ligero crema */
  
  /* Colores de texto profesionales */
  --text-primary: var(--primary-water); /* Texto principal agua profunda */
  --text-secondary: var(--secondary-water); /* Texto secundario agua media */
  --text-tertiary: var(--accent-water); /* Texto terciario agua clara */
  --text-muted: #8BA7B8; /* Texto atenuado */
  --text-accent: var(--primary-water);
  --text-dark: #1F4A5A; /* Texto muy oscuro para máximo contraste */
  
  /* Colores neutros mejorados */
  --white: #FFFFFF;
  --black: #000000;
  --gray-100: #1A1A1A;
  --gray-200: #2A2A2A;
  --gray-300: #3A3A3A;
  --gray-400: #4A4A4A;
  --gray-500: #5A5A5A;
  --gray-600: #6A6A6A;
  --gray-700: #8A8A8A;
  --gray-800: #E0E0E0;
  --gray-900: #FFFFFF;
  
  /* Colores del caribe adaptados */
  --caribbean-blue: var(--primary-water);
  --caribbean-turquoise: var(--secondary-water);
  --caribbean-coral: var(--accent-water);
  --caribbean-green: var(--secondary-water);
  --caribbean-yellow: var(--detail-water);
  
  /* Estados */
  --success-color: #28A745;
  --warning-color: #FFC107;
  --error-color: #DC3545;
  --info-color: #17A2B8;
  
  /* === TIPOGRAFÍA PROFESIONAL === */
  --font-heading: 'Montserrat', sans-serif; /* Para títulos elegantes */
  --font-body: 'Inter', sans-serif; /* Para texto general */
  --font-accent: 'Dancing Script', cursive; /* Para elementos especiales */
  --font-primary: var(--font-body);
  --font-secondary: var(--font-heading);
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Espaciado */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* Bordes */
  --border-radius-sm: 0.25rem;  /* 4px */
  --border-radius-md: 0.5rem;   /* 8px */
  --border-radius-lg: 0.75rem;  /* 12px */
  --border-radius-xl: 1rem;     /* 16px */
  --border-radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  
  /* === SOMBRAS PREMIUM MULTICAPA === */
  --shadow-soft: 0 2px 8px rgba(46, 106, 122, 0.06), 0 1px 4px rgba(46, 106, 122, 0.04);
  --shadow-medium: 0 4px 16px rgba(46, 106, 122, 0.08), 0 2px 8px rgba(46, 106, 122, 0.04);
  --shadow-strong: 0 8px 32px rgba(46, 106, 122, 0.12), 0 4px 16px rgba(46, 106, 122, 0.08);
  
  /* Sombras elegantes para cards */
  --shadow-card-rest: 0 1px 3px rgba(46, 106, 122, 0.12), 0 1px 2px rgba(46, 106, 122, 0.08);
  --shadow-card-hover: 0 8px 25px rgba(46, 106, 122, 0.15), 0 4px 10px rgba(46, 106, 122, 0.1), 0 2px 4px rgba(46, 106, 122, 0.06);
  --shadow-card-active: 0 12px 35px rgba(46, 106, 122, 0.18), 0 6px 15px rgba(46, 106, 122, 0.12), 0 3px 6px rgba(46, 106, 122, 0.08);
  
  /* Sombras especiales */
  --shadow-gold: 0 2px 12px rgba(46, 106, 122, 0.15), 0 1px 6px rgba(74, 138, 160, 0.1);
  --shadow-gold-hover: 0 6px 24px rgba(46, 106, 122, 0.18), 0 3px 12px rgba(74, 138, 160, 0.12);
  --shadow-teal: 0 2px 12px rgba(107, 155, 179, 0.2), 0 1px 6px rgba(145, 192, 212, 0.1);
  
  /* Compatibilidad */
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-medium);
  --shadow-lg: var(--shadow-strong);
  --shadow-xl: var(--shadow-strong);
  
  /* === EFECTOS DE DESENFOQUE === */
  --blur-light: blur(8px);
  --blur-medium: blur(12px);
  --blur-strong: blur(16px);
  
  /* === TRANSICIONES PREMIUM === */
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.2s ease-out;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  
  /* Transiciones específicas para efectos elegantes */
  --transition-elegant: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-hover: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Duraciones específicas */
  --duration-instant: 0.1s;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  
  /* Z-index */
  --z-background: -10;
  --z-content: 1;
  --z-header: 1000;
  --z-nav: 1000;
  --z-sidebar: 900;
  --z-loading: 9999;
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-tooltip: 1100;
  
  /* Grid y Layout */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
  
  --grid-gap-sm: var(--spacing-sm);
  --grid-gap-md: var(--spacing-md);
  --grid-gap-lg: var(--spacing-lg);
  
  /* Componentes específicos */
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--border-radius-lg);
  --card-shadow: var(--shadow-md);
  
  --button-padding-sm: var(--spacing-sm) var(--spacing-md);
  --button-padding-md: var(--spacing-md) var(--spacing-lg);
  --button-padding-lg: var(--spacing-lg) var(--spacing-xl);
  
  --input-padding: var(--spacing-md);
  --input-border-radius: var(--border-radius-md);
  
  /* Responsive breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}