/* =================================================================
   VARIABLES CSS - THE AWAKENING CODE V5.3.0
   Sistema de tokens de diseño - Patek Philippe Style
   ================================================================= */

:root {
  /* ===== COLORES BASE ===== */
  
  /* Fondos Oscuros */
  --color-black-pure: #000000;
  --color-black-soft: #0A0F0D;
  --color-black-heritage: #08120e;
  --color-dark-1: #1A1A1A;
  --color-dark-2: #2A2A2A;
  --color-dark-3: #3A3A3A;
  
  /* Fondos Claros */
  --color-white-pure: #FFFFFF;
  --color-white-soft: #F8F9FA;
  --color-white-alpha-2: rgba(255, 255, 255, 0.02);
  --color-white-alpha-4: rgba(255, 255, 255, 0.04);
  --color-white-alpha-10: rgba(255, 255, 255, 0.10);
  
  /* Dorado Patek Philippe */
  --gold-primary: #B8941F;        /* Dorado oscuro */
  --gold-champagne: #C9A961;      /* Dorado champagne */
  --gold-light: #D4AF37;          /* Dorado claro */
  --gold-alpha-10: rgba(184, 148, 31, 0.1);
  --gold-alpha-20: rgba(184, 148, 31, 0.2);
  --gold-alpha-30: rgba(184, 148, 31, 0.3);
  --gold-alpha-40: rgba(184, 148, 31, 0.4);
  --gold-alpha-60: rgba(184, 148, 31, 0.6);
  --gold-alpha-70: rgba(184, 148, 31, 0.7);
  
  /* Textos sobre Fondo Oscuro */
  --text-on-dark-primary: #FFFFFF;
  --text-on-dark-secondary: rgba(255, 255, 255, 0.9);
  --text-on-dark-tertiary: rgba(255, 255, 255, 0.8);
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  
  /* Textos sobre Fondo Claro */
  --text-on-light-primary: #1A1A1A;
  --text-on-light-secondary: #2A2A2A;
  --text-on-light-tertiary: #4A4A4A;
  --text-on-light-muted: #5A5A5A;
  
  /* ===== TIPOGRAFÍA ===== */
  
  /* Familias */
  --font-luxury: 'Playfair Display', serif;
  --font-display: 'Inter', sans-serif;
  
  /* Pesos */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Tamaños Desktop */
  --font-size-h1: 72px;
  --font-size-h2: 56px;
  --font-size-h3: 42px;
  --font-size-h4: 32px;
  --font-size-h5: 24px;
  --font-size-body-large: 19px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* ===== SPACING ===== */
  
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 120px;
  
  /* ===== BORDERS ===== */
  
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-pill: 50px;
  
  --border-width-thin: 1px;
  --border-width-normal: 2px;
  --border-width-thick: 3px;
  
  /* ===== SHADOWS ===== */
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
  
  --shadow-gold-sm: 0 4px 12px rgba(184, 148, 31, 0.2);
  --shadow-gold-md: 0 8px 24px rgba(184, 148, 31, 0.3);
  --shadow-gold-lg: 0 12px 40px rgba(184, 148, 31, 0.4);
  
  /* ===== TRANSITIONS ===== */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ===== Z-INDEX ===== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===== BREAKPOINTS (para JS) ===== */
  
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-desktop-lg: 1400px;
  --breakpoint-desktop-xl: 1920px;
  
  /* ===== RESULTADOS BLIND SPOT TEST - PATEK PHILIPPE STYLE v5.6.0 ===== */
  
  /* Success (5/5 - Top 3% Elite) */
  --result-success-bg: var(--color-dark-1);
  --result-success-border: var(--gold-primary);
  --result-success-icon-bg: var(--gold-primary);
  --result-success-icon-color: var(--color-black-pure);
  
  /* Warning (3-4/5 - Advertencia) */
  --result-warning-bg: var(--color-dark-1);
  --result-warning-border: var(--gold-champagne);
  --result-warning-icon-bg: var(--gold-champagne);
  --result-warning-icon-color: var(--color-black-pure);
  
  /* Danger (0-2/5 - Peligro) */
  --result-danger-bg: var(--color-black-pure);
  --result-danger-border: var(--gold-light);
  --result-danger-icon-bg: var(--color-white-pure);
  --result-danger-icon-color: var(--color-black-pure);
  
  /* Texto sobre resultados oscuros */
  --result-text-primary: var(--color-white-pure);
  --result-text-secondary: rgba(255, 255, 255, 0.9);
  --result-text-accent: var(--gold-champagne);
  --result-text-muted: rgba(255, 255, 255, 0.6);
  
  /* Cajas de contenido */
  --result-box-bg: rgba(184, 148, 31, 0.08);
  --result-box-border: var(--gold-primary);
  --result-box-bg-danger: rgba(255, 255, 255, 0.03);
  
  /* ===== v5.7.0 SUPER PREMIUM BALANCE - Texturas y Profundidad ===== */
  
  /* Gradientes para fondos (textura sutil) */
  --result-gradient-success: linear-gradient(135deg, #1A1A1A 0%, #242424 50%, #1A1A1A 100%);
  --result-gradient-warning: linear-gradient(135deg, #1A1A1A 0%, #201E1A 50%, #1A1A1A 100%);
  --result-gradient-danger: linear-gradient(135deg, #000000 0%, #0A0A0A 50%, #000000 100%);
  
  /* Overlays radiales dorados (highlights) */
  --result-overlay-gold: radial-gradient(circle at top right, rgba(184, 148, 31, 0.05), transparent 50%);
  --result-overlay-gold-secondary: radial-gradient(circle at bottom left, rgba(184, 148, 31, 0.03), transparent 50%);
  
  /* Bordes con más presencia */
  --result-border-success-enhanced: 2px solid rgba(184, 148, 31, 0.6);
  --result-border-warning-enhanced: 2px solid rgba(201, 169, 97, 0.6);
  --result-border-danger-enhanced: 3px solid rgba(212, 175, 55, 0.7);
  
  /* Glow effects (auras doradas) */
  --result-glow-success: 0 0 40px rgba(184, 148, 31, 0.15);
  --result-glow-warning: 0 0 50px rgba(201, 169, 97, 0.2);
  --result-glow-danger: 0 0 80px rgba(212, 175, 55, 0.3);
  
  /* Inner highlights (bordes internos iluminados) */
  --result-inner-highlight-success: inset 0 1px 0 rgba(184, 148, 31, 0.3);
  --result-inner-highlight-warning: inset 0 1px 0 rgba(201, 169, 97, 0.2);
  --result-inner-highlight-danger: inset 0 2px 0 rgba(212, 175, 55, 0.3);
  
  /* Cajas de contenido mejoradas */
  --result-box-bg-enhanced: rgba(184, 148, 31, 0.12);
  --result-box-border-enhanced: 1px solid rgba(184, 148, 31, 0.3);
  --result-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =================================================================
   FIN VARIABLES V5.7.0 - Super Premium Balance
   ================================================================= */