/* ============================================================
   HIF — Design System 2026
   ============================================================ */
:root {
  /* Marca */
  --hif-blue: #0ea5e9;
  --hif-blue-dark: #0284c7;
  --hif-blue-deeper: #0c1929;
  --hif-blue-light: #38bdf8;
  --hif-blue-pale: #e0f2fe;
  --hif-green: #10b981;
  --hif-green-dark: #059669;
  --hif-green-light: #34d399;
  --hif-green-pale: #d1fae5;
  --hif-accent: #8b5cf6;
  --hif-accent-light: #a78bfa;

  /* Superficies */
  --hif-bg: #f8fafc;
  --hif-surface: #ffffff;
  --hif-white: #ffffff;
  --hif-ink: #0f172a;
  --hif-muted: #64748b;
  --hif-border: rgba(15, 23, 42, 0.08);

  /* Gradientes */
  --hif-gradient: linear-gradient(135deg, #0ea5e9 0%, #10b981 50%, #34d399 100%);
  --hif-gradient-soft: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
  --hif-gradient-dark: linear-gradient(160deg, #0c1929 0%, #0f2744 45%, #0a1628 100%);
  --hif-gradient-glow: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(16, 185, 129, 0.25), transparent 60%);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;

  /* Efectos */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.15);
  --shadow-glow-blue: 0 0 40px rgba(14, 165, 233, 0.2);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(20px);
}