// =====================================================================
// IzyPagos · Design Tokens (SCSS)
// Fuente única para diseñadores y desarrolladores. v1.0 · 2026
// =====================================================================

// ---- Marca ----------------------------------------------------------
$izy-azul-50:  #EAF1FF;
$izy-azul-100: #D6E4FF;
$izy-azul-300: #7FAAFF;
$izy-azul-500: #3D82FF;   // fill claro / hover
$izy-azul-600: #1466FF;   // PRIMARIO
$izy-azul-700: #0B4ED1;   // texto/enlace accesible
$izy-azul-900: #0A2A66;
$izy-cian-500: #17C1E8;   // SECUNDARIO
$izy-cian-700: #0E7C97;
$izy-noche:    #070C18;   // base tema oscuro

// ---- Neutros (Tinta) ------------------------------------------------
$tinta-900: #0B1524;
$tinta-700: #334155;
$tinta-500: #64748B;
$tinta-300: #CBD5E1;
$tinta-200: #E2E8F0;
$tinta-100: #F1F5F9;
$nube:      #F6F8FC;
$blanco:    #FFFFFF;

// ---- Semánticos -----------------------------------------------------
$exito-500:  #12B76A;  $exito-700: #067647;  $exito-50: #E7F8F0;
$alerta-500: #F79009;  $alerta-700: #B54708; $alerta-50: #FEF3E2;
$error-500:  #F04438;  $error-700: #B42318;  $error-50: #FEECEB;

// ---- Roles ----------------------------------------------------------
$accent:      $izy-azul-600;
$accent-ink:  $izy-azul-700;

// ---- Tipografía -----------------------------------------------------
$font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
$font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
$font-mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;

// ---- Radios / espaciado / sombras ----------------------------------
$radius-sm: 8px;  $radius-md: 12px;  $radius-lg: 16px;  $radius-xl: 24px;  $radius-pill: 999px;
$space: (1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 24px, 6: 32px, 7: 48px, 8: 64px);
$shadow-1: 0 1px 2px rgba(11,21,36,.06), 0 1px 1px rgba(11,21,36,.04);
$shadow-2: 0 4px 12px rgba(11,21,36,.08);
$shadow-3: 0 12px 28px rgba(11,21,36,.12);

// ---- Breakpoints ----------------------------------------------------
$bp: (sm: 600px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1536px);