/**
 * MetodologIA Design Tokens
 * Variables globales de colores, tipografía y efectos.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ═══════════════════════════════════════════════════════════════
     BACKGROUNDS
     ═══════════════════════════════════════════════════════════════ */
  --bg-primary: #020617;        /* Main page background */
  --bg-surface: #0f172a;        /* Cards, elevated sections */
  --bg-elevated: rgba(255, 255, 255, 0.03);  /* Glass-effect surfaces */
  --bg-hover: rgba(255, 255, 255, 0.05);     /* Hover states */
  
  /* ═══════════════════════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════════════════════ */
  --text-primary: #FFFFFF;      /* Headings, important text */
  --text-secondary: #cbd5e1;    /* Body text, descriptions */
  --text-muted: #64748b;        /* Captions, hints, less important */
  
  /* ═══════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════ */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  
  /* ═══════════════════════════════════════════════════════════════
     BRAND COLORS
     ═══════════════════════════════════════════════════════════════ */
  --brand-gold: #FFD700;
  --brand-gold-dark: #FFA000;
  --brand-gold-glow: rgba(255, 215, 0, 0.2);
  
  --brand-yellow: #fbbf24;
  --brand-yellow-dark: #d97706;
  --brand-yellow-glow: rgba(251, 191, 36, 0.2);
  
  --brand-red: #ef4444;
  --brand-red-dark: #dc2626;
  --brand-red-glow: rgba(239, 68, 68, 0.2);
  
  --brand-emerald: #34d399;
  --brand-emerald-dark: #10b981;
  --brand-emerald-glow: rgba(52, 211, 153, 0.2);
  
  --brand-cyan: #22d3ee;
  --brand-cyan-dark: #06b6d4;
  --brand-cyan-glow: rgba(34, 211, 238, 0.2);
  
  --brand-purple: #8b5cf6;
  --brand-purple-dark: #7c3aed;
  --brand-purple-glow: rgba(139, 92, 246, 0.2);
  
  --brand-blue: #3b82f6;
  --brand-blue-dark: #2563eb;
  --brand-blue-glow: rgba(59, 130, 246, 0.2);
  
  /* ═══════════════════════════════════════════════════════════════
     GRADIENTS
     ═══════════════════════════════════════════════════════════════ */
  --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
  --gradient-yellow: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
  --gradient-surface: linear-gradient(135deg, #0f172a 0%, #020617 100%);
}