/* ==============================================
   TOKENS — Design Tokens & CSS Custom Properties
   Importar primero. No contiene reglas visuales.
=============================================== */

:root {
  /* ── Paleta ── */
  --color-teal:        #35c9d6;
  --color-teal-dark:   #22b8c7;
  --color-blue:        #0a4d8c;
  --color-blue-dark:   #083b6b;
  --color-gold:        #d8b25c;

  --color-bg:          #f7fcfd;
  --color-surface:     #ffffff;
  --color-surface-soft:#eaf4f7;

  --color-text-primary:  #12324a;
  --color-text-secondary:#5b7a90;

  /* ── Gradientes ── */
  --gradient-brand: linear-gradient(135deg, #35c9d6 0%, #0a4d8c 100%);

  /* ── Sombras ── */
  --shadow-soft: 0 10px 30px rgba(10, 77, 140, 0.08);
  --shadow-card: 0 18px 40px rgba(10, 77, 140, 0.18);

  /* ── Radios ── */
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* ── Tipografía ── */
  --font-display: "Poppins", sans-serif;
  --font-body:    "Nunito Sans", sans-serif;

  /* ── Transición global ── */
  --transition: all 0.35s ease;
}