/**
 * Variables del Sistema de Diseño
 * TU MEJOR INVERSIÓN ERES TÚ
 * Estética: Lujo Sobrio + Tecnología / Finanzas (70% Carbón, 20% Blanco/Gris, 10% Oro + Azul)
 */

:root {
  /* 70% Negro / Carbón */
  --bg-darkest: #07080a;
  --bg-primary: #0b0c10;
  --bg-secondary: #12141a;
  --bg-surface: #161922;
  --bg-card: #1a1e28;
  --bg-card-hover: #222735;
  --bg-elevated: #262c3c;

  /* 20% Blanco / Grises */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #8896ab;
  --text-dim: #64748b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-card: rgba(255, 255, 255, 0.1);

  /* 10% Acentos Oro y Azul Eléctrico */
  --gold-primary: #d4af37;
  --gold-light: #f3e5ab;
  --gold-hover: #e5c058;
  --gold-glow: rgba(212, 175, 55, 0.2);
  --gold-border: rgba(212, 175, 55, 0.35);

  --blue-primary: #0284c7;
  --blue-light: #38bdf8;
  --blue-hover: #0369a1;
  --blue-glow: rgba(2, 132, 199, 0.25);
  --blue-border: rgba(56, 189, 248, 0.35);

  --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa820a 100%);
  --gradient-blue: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --gradient-card: linear-gradient(180deg, rgba(26, 30, 40, 0.9) 0%, rgba(18, 20, 26, 0.95) 100%);
  --gradient-hero: radial-gradient(circle at 50% 0%, rgba(2, 132, 199, 0.12) 0%, rgba(11, 12, 16, 0) 70%);

  /* Tipografías y Espaciado */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cinzel', Georgia, serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 4px 20px var(--gold-glow);
  --shadow-blue: 0 4px 20px var(--blue-glow);

  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.4s ease;

  --max-width-content: 1200px;
  --max-width-narrow: 800px;
  --header-height: 72px;
}