/* ==========================================================================
   INVERMEDIC GROUP HOLDING - DESIGN TOKENS & VARIABLES
   Identidad Oficial: Monocromático de Lujo, Glassmorphism y Micro-animaciones
   ========================================================================== */

:root {
  /* --- PALETA CROMÁTICA OFICIAL --- */
  --color-black: #000000;
  --color-bg-dark: #070708;
  --color-bg-card: rgba(22, 22, 24, 0.7);
  --color-bg-card-hover: rgba(30, 30, 34, 0.85);
  --color-bg-surface: #121214;
  --color-bg-surface-elevated: #1a1a1d;
  
  --color-gray-dark: #1a1a1a;
  --color-gray-medium: #4d4d4d;
  --color-gray-muted: #8c8c8e;
  --color-gray-light: #d1d1d6;
  --color-white: #ffffff;
  
  /* Acentos de Prestigio (20 Años & Magic UI Highlights) */
  --color-gold-accent: #cfa86e;
  --color-gold-glow: rgba(207, 168, 110, 0.25);
  --color-gold-gradient: linear-gradient(135deg, #e8cfa6 0%, #cfa86e 50%, #9e7a41 100%);
  
  --color-brand-glow: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);

  /* --- BORDES Y GLASSMORPHISM --- */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-light: 1px solid rgba(255, 255, 255, 0.16);
  --border-active: 1px solid rgba(207, 168, 110, 0.5);
  --border-radius-xs: 6px;
  --border-radius-sm: 10px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-full: 9999px;
  
  --glass-blur: blur(16px);
  --glass-blur-sm: blur(8px);
  --glass-bg: rgba(18, 18, 20, 0.65);
  --glass-bg-elevated: rgba(26, 26, 29, 0.75);

  /* --- SOMBRAS Y RESPLANDOR (MAGIC UI) --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 35px rgba(255, 255, 255, 0.07);
  --shadow-glow-gold: 0 0 30px rgba(207, 168, 110, 0.2);

  /* --- TIPOGRAFÍAS --- */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- ESPACIADOS Y LAYOUT --- */
  --container-max: 1240px;
  --section-spacing: 96px;
  --section-spacing-mobile: 64px;

  /* --- TRANSICIONES --- */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   TEMA CLARO (LIGHT THEME)
   ========================================================================== */
html.light {
  --color-black: #000000;
  --color-bg-dark: #fbfbfd;
  --color-bg-card: rgba(255, 255, 255, 0.88);
  --color-bg-card-hover: rgba(255, 255, 255, 0.98);
  --color-bg-surface: #ffffff;
  --color-bg-surface-elevated: #f2f2f6;

  --color-gray-dark: #e8e8ed;
  --color-gray-medium: #6e6e73;
  --color-gray-muted: #515154;
  --color-gray-light: #1c1c1e;
  --color-white: #0a0a0c; /* Titulares y textos de alta jerarquía en negro profundo */

  --border-subtle: 1px solid rgba(0, 0, 0, 0.08);
  --border-light: 1px solid rgba(0, 0, 0, 0.15);
  --border-active: 1px solid rgba(207, 168, 110, 0.7);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-elevated: rgba(255, 255, 255, 0.95);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 35px rgba(0, 0, 0, 0.04);

  /* Acentos dorados de alto contraste en tema blanco */
  --color-gold-accent: #653b06;
  --color-gold-gradient: linear-gradient(135deg, #502c03 0%, #835212 50%, #402101 100%);
}