/* ==========================================================
   DESIGN TOKENS — Tu Pensión Inteligente
   ========================================================== */
:root {
  /*  Paleta de colores */
  --color-navy: #172837;
  /* Texto principal / fondos oscuros */
  --color-dark: #1e1e1e;
  --color-blue: #0170b9;
  /* Azul corporativo */
  --color-blue-light: #4472ff;
  --color-cta: #f58529;
  /* Naranja CTA */
  --color-cta-alt: #cc3366;
  --color-bg-light: #f5f5f7;
  /* Fondos claros alternos */
  --color-bg-alt: #f4eded;
  --color-white: #ffffff;
  --color-text: #3f444b;
  --color-text-muted: #69727d;

  /* 🔤 Tipografía */
  --font-main: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-body: 1.125rem;

  /* 📐 Layout */
  --container-max: 1200px;
  --spacing-section: clamp(4rem, 8vw, 6.5rem);
  --radius-btn: 50px;
  --radius-card: 14px;

  /* ✨ Sombras y transiciones */
  --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 10px rgba(23, 40, 55, 0.08);
  --transition: 0.3s ease;
}